svg - 无法注册 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属性(property)。 IE。: <mat-icon svgIcon="play_button"></mat-icon>
2. MatIconRegistry应该从 @angular/material 导入
3. 确保导入 HttpClientModule在 app.module.ts以便可以下载您请求的 Assets 。