Cannot register svg icon

Question

I would like to register a new Material2 icon, I have this code:

import {Component, OnInit} from '@angular/core';
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'app-control-panel',
  templateUrl: './control-panel.component.html',
  styleUrls: ['./control-panel.component.scss']
})

export class ControlPanelComponent implements OnInit {

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

    console.log('registering  play button icon');  // << confirm

    iconRegistry.addSvgIcon('play_button',
      sanitizer.bypassSecurityTrustResourceUrl('assets/images/play-button.svg'));
  }

  ngOnInit() {
  }

}

the log statement above is being hit. And I have this HTML

  <button mat-raised-button color="accent">
    <mat-icon>play_button</mat-icon>
    Start Recording
  </button>

if I use an existing icon it works, but if I use "play_button" it doesn't work.

Anyone know what might be going wrong?

Answer 1

1. <mat-icon> should set the svgIcon property. i.e.: <mat-icon svgIcon="play_button"></mat-icon>
2. MatIconRegistry should be imported from @angular/material
3. Ensure that you import HttpClientModule in app.module.ts so the asset you're requesting can be downloaded.