Angular 4中使用Angular Material创建导航抽屉时mat-icon不显示问题

嘿，我来帮你搞定这个mat-icon没正确显示的问题！结合Angular 4和Angular Material的特性，大概率是这几个环节出了问题，咱们一步步排查：

• 确认MatIconModule已正确导入
  Angular Material的每个组件都需要对应的模块导入才能生效，mat-icon也不例外。打开你的app.module.ts（或者对应的功能模块文件），确保已经导入并声明了MatIconModule：

  import { MatIconModule } from '@angular/material/icon';
  import { MatToolbarModule } from '@angular/material/toolbar';
  import { MatButtonModule } from '@angular/material/button';
  
  @NgModule({
    imports: [
      // 其他导入项
      MatToolbarModule,
      MatButtonModule,
      MatIconModule // 必须添加这个！
    ]
  })
  export class AppModule { }
  

• 确保Material Icons字体资源已引入
  mat-icon依赖Material Icons字体来渲染图标，你需要在项目中引入这个字体资源：

  • 可以在项目的全局样式文件（比如styles.css）中添加字体声明，或者在index.html里配置字体加载（注意路径要正确，不管是本地字体还是CDN方式）。
  • 要确保字体资源的引入配置无误，这样图标才能正常渲染。

• 检查样式冲突或显示问题
  有时候图标是存在的，但样式问题导致看不见：

  • 暂时去掉example-header类，看看图标是否显示，排查是否是自定义样式隐藏了图标或者让图标颜色和工具栏背景色一致。
  • 可以给mat-icon显式指定颜色，比如<mat-icon color="accent">menu</mat-icon>，这样更容易判断图标是否存在。

• 验证图标名称的正确性
  确认menu是Material Icons里存在的有效图标名称，拼写没有错误（大小写不敏感，但要确保名称正确）。

修改后的工具栏代码示例（结合上述修正）：

<mat-toolbar class="example-header" color="primary">
  <button mat-icon-button>
    <mat-icon color="accent">menu</mat-icon>
  </button>
  <span class="header-name">Hello</span>
</mat-toolbar>

按照上面的步骤排查，应该就能解决mat-icon不显示的问题啦！

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