无法注册 svg 图标

Question

我想注册一个新的 Material2 图标，我有这个代码：

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() {
  }

}

上面的日志语句正在被命中。我有这个 HTML

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

如果我使用现有的图标它可以工作，但如果我使用“play_button”它不起作用。

有谁知道可能会出什么问题？

Answer 1

1. <mat-icon>应该设置svgIcon属性。IE： <mat-icon svgIcon="play_button"></mat-icon>
2. MatIconRegistry 应该从 @angular/material
3. 确保您导入HttpClientModule，app.module.ts以便可以下载您请求的资产。