生产中未显示某些材料图标

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>

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;
}

Answer 2

如果您使用的是 SASS 并且将不透明度设置为类似的百分比

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

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

将不透明度更改为小数会得到您期望的结果。

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