CODEWITHSUNDEEP
angularfont-facegoogle-material-icons
devSK
devSK

Reputation: 2026

How to solve Flash of Unstyled Text in Angular?

My custom font and material icons are switched to default font and text respectively when loading any route for the first time. How to eliminate that behavior in Angular 5 app?

Upvotes: 1

Views: 1347

Answers (1)

Andrew Hill
Andrew Hill

Reputation: 2253

For anyone else coming across this issue I found that mat-icon components were being loaded with my default font that I had set at a higher level in the project (in my case this was Open Sans). Then the icons would appear only after the Material Icons font-family finished loading.

I solved the issue by specifically setting the font-family to Material Icons on all mat-icon elements at a higher level.

.mat-icon, mat-icon {
  font-family: 'Material Icons' !important;
}

While I generally recommend against using !important in CSS - this does seem like a reasonable place to use it as no other font should load these icons except for the Material Icons font if you want to prevent the Flash of Unstyled Text.

Upvotes: 1

Related Questions