Angular Material的mat-icon编译无报错但无法显示图标如何解决

排查解决步骤 #

• 检查Material Icons字体资源引入
  Angular Material默认mat-icon依赖官方图标字体，需在项目入口index.html的<head>标签内添加字体引入（也可将字体资源下载到本地后引入本地路径，避免外网访问限制），示例引入代码如下：

  <link href="iconfont资源路径?family=Material+Icons" rel="stylesheet">
  

• 确认模块导入范围正确
  若你使用了路由懒加载，仅在根模块导入MatIconModule不会生效，需要在当前路由对应组件所属的模块（懒加载模块/共享模块）中完成导入并声明，导入代码参考：

  // 对应模块的ts文件中
  import { MatIconModule } from '@angular/material/icon';
  
  @NgModule({
    imports: [
      // 其他导入...
      MatIconModule
    ],
    // 其他配置...
  })
  export class YourModule { }
  

• 核对组件内图标写法
  默认字体图标使用格式为<mat-icon>官方图标名</mat-icon>，需确认图标名称拼写正确，没有漏写标签内的图标名，也没有错误绑定不存在的自定义svg图标。
• 排查样式覆盖问题
  打开浏览器开发者工具的元素检查面板，定位mat-icon对应的DOM节点，确认节点是否正常生成，是否存在display: none、opacity: 0、字体大小为0、字体颜色与背景色一致等被隐藏的样式配置。
• 校验版本匹配性
  Angular Material 6.x不存在6.14.15版本，最高迭代版本为6.4.7，需确认你的@angular/core、@angular/common等核心框架包的大版本，与@angular/material、@angular/cdk的大版本完全一致，版本不兼容会出现无报错但组件不渲染的异常。

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