一些材料图标在生产中没有显示出来。

Question

我不知道为什么，但只有在生产环境中，一些材料图标才不会出现，如您所见，第一个图标缺失：

这里是代码：

 <mat-nav-list>
   <a mat-list-item routerLink="/dashboard" matTooltip="dashboard">
     <mat-icon matListIcon>bar_chart</mat-icon>
   </a>
   <a mat-list-item (click)="routeToContacts()" matTooltip="contacts">
     <mat-icon matListIcon>people</mat-icon>
   </a>

- Alessandro Celeghin

Answer 1

你需要将样式插入到项目中：

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

如果这没有解决问题，请尝试在你的 style.css (或 style.scss) 中添加以下代码：

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

- Melchia

---

我原以为 ng add @angular/material 会自动添加这个 CSS。 - divine

Answer 2

如果您正在使用SASS并将不透明度设置为百分比，例如：

mat-icon {
      opacity: 50%;
      padding-right: 0.5em;
}    

生产版本中图标可能会“消失”，因为SASS规则。结果是在生成的CSS文件中，您的不透明度为0％或1％。

将不透明度更改为小数将给您预期的结果。

mat-icon {
      opacity: 0.5;
      padding-right: 0.5em;
}    

- Wild Bill

Answer 3

有一个类似的问题，图标event_repeat在生产环境中出现了两个错误的图标，但在开发环境中可以正常工作。构建过程会改变字体的嵌入方式。在我的情况下，旧版本的woff2文件被加载了(v109而不是当前的v121)。文件夹node_modules\.cache\angular-build-fonts中有适当的css，所以我删除了node_modules并运行了cmp ci。这解决了这个问题。

- Benjamin Freitag