材质图标在 Angular 生产版本中不渲染

Question

在::before/::after内容中，材质图标在生产中未正确渲染。font属性在生产生成时消失。

我已导入材质图标https://fonts.googleapis.com/icon?family=Material+图标

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

解决问题