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

Question

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

我已经导入了材质图标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';

解决了问题