Material 图标未在 Angular 生产版本中呈现

Question

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

我导入了Material个图标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. 导入 material-图标并将其添加到 angular.json 而不是
2. 运行 使用 extractCss: false
的生产版本

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

Answer 1

生产版本不适用于 CSS 简写如 font: 24px 'Material Icons'

更新为

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

解决问题