Angular Material Icons(v14)部分图标无法正常显示问题求助

架构老林

2026-8-4

Angular Material Icons（v14）部分图标异常问题的解决建议

问题现象梳理

正常显示的图标：home，代码示例：
```
<mat-icon fontIcon="home"></mat-icon>
```
异常情况：
- login 图标完全无法显示
- 使用 start 作为图标名称时，实际显示的是 star 图标

可能的解决方向

核对图标名称与对应版本的兼容性
Angular Material v14对应的Material Icons字体版本有固定的图标清单，部分图标可能在该版本中尚未添加，或者名称有变更：
- login 图标在较旧的Material Icons版本中可能不存在，建议确认该图标是否属于Angular Material v14支持的图标范围。
- Material Icons中不存在名为start的图标，这就是为什么输入start会显示star——大概率是字体的匹配 fallback 机制导致的，你可能是想要star或者其他类似图标，比如play_arrow？
确认Material Icons字体加载正常
检查项目index.html中的字体引入是否正确，确保引入的字体版本与Angular Material v14兼容：
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
避免引入过新或过旧的字体文件，导致图标名称不匹配。

排查自定义图标注册的冲突
查看项目中是否通过MatIconRegistry自定义了图标映射，比如：

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

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
  // 若此处对login或start有自定义注册，可能导致显示异常
  iconRegistry.addSvgIcon('login', sanitizer.bypassSecurityTrustResourceUrl('path/to/login.svg'));
}

如果存在这类代码，检查自定义图标的路径是否正确，或者是否覆盖了默认的字体图标。