css - 材质图标不会在 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

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

将其更新为

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

解决问题