1

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?

vter
  • 1,881
  • 1
  • 20
  • 38
  • This isn't normal behavior, you will need to elaborate and provide a minimal complete and verifiable example https://stackoverflow.com/help/mcve – Z. Bagley Dec 15 '17 at 01:19
  • Okay, thanks for pointing out. I'm trying to reproduce. On production version it works fine. But on development the problems remains. – vter Dec 15 '17 at 01:35

1 Answers1

1

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.

Andrew Hill
  • 2,165
  • 1
  • 26
  • 39