Material Icons在浏览器中不显示，Angular刷新按钮图标问题咨询

MatIconModule是必须的 #

没错，必须引入MatIconModule。<mat-icon>是Angular Material封装的专属组件，不导入这个模块的话，Angular根本识别不了这个标签，自然没法渲染图标。你现在的导入方式是对的，只要保证这个模块在@NgModule的imports数组里，且所在模块是你用<mat-icon>的组件所属的模块就行。

图标不显示的排查修复步骤 #

1. 先改对图标名称
   你要做刷新按钮，但现在用的是home图标，换成refresh才对：

   <button class="refreshButton" mat-icon-button>
     <mat-icon>refresh</mat-icon>
   </button>
   

2. 确认字体加载正常
   打开浏览器F12开发者工具，切到「网络」页签刷新页面，看看有没有成功加载fonts.googleapis.com的CSS，以及后续的字体文件（比如MaterialIcons-Regular.woff2）。如果加载失败，检查网络或者确认index.html里的link标签有没有写错，正确的写法应该是：

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

3. 检查模块导入范围
   要是用<mat-icon>的组件不在AppModule下，而是在子模块里，那得确保子模块也导入了MatIconModule，或者把MatIconModule放到SharedModule里导出，再让子模块导入SharedModule。
4. 排查样式冲突
   看看有没有自定义CSS把<mat-icon>的样式搞坏了，比如改了font-family或者设了display: none。可以在开发者工具里看<mat-icon>的计算样式，确认font-family里包含'Material Icons'。

快速测试方法 #

要是上面的步骤都试过还不行，直接在页面加个纯文本图标测试：

<span class="material-icons">refresh</span>

这个能显示的话，说明字体没问题，问题出在Angular组件的使用上；要是也不显示，那肯定是字体加载的问题。

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