Material Icon doesn't render in Angular production build

Question

Material Icons are not rendered properly in production when in ::before/::after content. The font property disappears on production build.

I have imported 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';
}

When running ng build or ng serve it renders the correct icon arrow icon, but with production build it simple renders the text arrow_drop_down

I have tried

1. Importing material-icons and adding it in angular.json instead
2. Running the production build with extractCss: false

Nothing has worked so far. Any ideas?

Answer 1

The production build doesn't work with CSS shorthands like font: 24px 'Material Icons'

Updating it to

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

solves the problem