材质图标不会在 Angular 生产版本中呈现

Question

::before/::after 内容中的材质图标无法在生产中正确呈现。 font 属性在生产版本中消失。

我已经导入 Material Icons https://fonts.googleapis.com/icon?family=Material+Icons

app.component.html

<div></div>

app.component.css

div::before {
  content: 'arrow_drop_down';
  font: 24px 'Material Icons';
}

在运行 ng build 或 ng serve 时，它会呈现正确的图标箭头图标，但在生产版本中，它会简单地呈现文本 arrow_drop_down

我试过了

1. 导入材质图标并将其添加到angular.json 中
2. 使用extractCss: false 运行生产构建

到目前为止没有任何效果。有什么想法吗？

Answer 1

生产版本不适用于 font: 24px 'Material Icons' 等 CSS 速记

更新到

font-size: 24px;
font-family: 'Material Icons';

解决问题