Angular项目Mat-Icon仅显示文本不显示图标问题求助

排查步骤 #

• 先确认index.html中Material Icons字体引入是否正确，标准配置如下：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

如果是国内网络环境谷歌源加载失败，可替换为国内镜像源，或直接将字体文件下载到本地静态资源目录后引入。

• 检查mat-icon组件用法是否正确，官方默认图标调用方式为：

<mat-icon>home</mat-icon>

如果使用自定义图标，需提前通过MatIconRegistry完成图标注册，未注册的自定义图标只会显示文本内容。

• 检查模块导入是否覆盖到使用场景：
  • 若使用NgModule架构，需确认声明目标组件的模块imports数组中已加入MatIconModule，仅在根模块导入不生效
  • 若使用独立组件架构，需确认目标组件自身的imports数组中已加入MatIconModule
• 检查样式冲突：打开浏览器开发者工具选中mat-icon元素，查看计算属性中的font-family是否为Material Icons，如果被全局样式覆盖，可添加如下样式修复：

mat-icon {
  font-family: 'Material Icons' !important;
}

• 确认Angular核心库与Angular Material库版本完全匹配，大版本号不一致会导致组件异常，可执行ng version查看两者版本是否对应。
• 排除缓存问题：清除浏览器缓存后重启开发服务ng serve --open，确认配置是否生效。

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