Angular Material部分图标无法加载求助（以e911_emergency为例）

使用Angular 17.2.1搭配Angular Material 17.3.7时，无法加载Google Fonts Icons中的部分图标（例如e911_emergency），切换到Angular 18环境后问题仍存在。

图标使用代码：

<button mat-fab extended [mat-dialog-close]="'emergency'">
  <mat-icon>e911_emergency</mat-icon>
  Emergency
</button>

已通过ng add @angular/material完成Angular Material安装，当前index.html中的字体引入如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

1. 补充引入对应字体变体 #

e911_emergency属于Material Icons的Round风格变体，仅引入基础版Material Icons字体无法覆盖该图标。需要在index.html中添加Round风格的字体引入：

<!-- 替换原有的Material Icons链接，同时包含基础版和Round版 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">

2. 指定图标使用的字体家族 #

在<mat-icon>组件中通过fontSet属性明确指定使用Round风格字体：

<button mat-fab extended [mat-dialog-close]="'emergency'">
  <mat-icon fontSet="material-icons-round">e911_emergency</mat-icon>
  Emergency
</button>

备选方案：改用SVG图标 #

如果字体图标仍无法正常显示，可直接使用SVG格式的图标：

1. 获取e911_emergency的SVG文件，放入项目assets/icons目录下
2. 在对应模块中注册该SVG图标：

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

@NgModule({
  imports: [MatIconModule]
})
export class YourFeatureModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'e911_emergency',
      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/e911_emergency.svg')
    );
  }
}

3. 在模板中使用SVG图标：

<mat-icon svgIcon="e911_emergency"></mat-icon>

内容的提问来源于stack exchange，提问作者R1D3R175