Angular mat-icon 引入MatIconModule后不显示图标仅显示名称问题

• 确认引入Material Icons字体资源
  MatIconModule仅提供组件逻辑，图标渲染依赖官方Material Icons字体库，可任选以下一种方式引入：
  • 在线引入：在项目index.html的<head>节点中添加如下代码

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

  • 本地离线引入：先执行安装命令npm install material-icons，再在angular.json的build.options.styles数组中添加样式路径

  "styles": [
    "node_modules/material-icons/iconfont/material-icons.css",
    "src/styles.scss"
  ]
  

• 确认MatIconModule已加入NgModule的imports数组
  仅导入模块引用不生效，需要将MatIconModule添加到对应模块的imports配置中：

@NgModule({
  imports: [
    // 其余依赖模块
    MatIconModule
  ]
})
export class AppModule {}

• 确认Angular Material主题已正确引入
  在全局样式文件（通常为src/styles.scss）中引入预设主题：

@use "@angular/material/prebuilt-themes/indigo-pink.css";

• 排查样式冲突
  打开浏览器开发者工具检查mat-icon元素的font-family属性，若被自定义样式覆盖，可添加全局样式修复：

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

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