无法注册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”就不能正常工作。

有人知道可能出了什么问题吗？

- user5047085

Answer 1

1. <mat-icon>标签应该设置svgIcon属性。例如: <mat-icon svgIcon="play_button"></mat-icon>
2. MatIconRegistry应该从@angular/material中导入。
3. 确保在app.module.ts中导入HttpClientModule，以便可以下载您要请求的资源。

- p4r1