Как решить Flash из Unstyled текста в Angular?

Question

Мой custom font а также material icons переключаются на шрифт и текст по умолчанию соответственно при загрузке любого маршрута в первый раз. Как устранить это поведение в Angular 5 app?

Answer 1

Для всех, кто сталкивался с этой проблемой, я обнаружил, что mat-icon компоненты загружались с моим шрифтом по умолчанию, который я установил на более высоком уровне в проекте (в моем случае это был Open Sans). Тогда значки появятся только после Material Icons Семейство шрифтов завершило загрузку.

Я решил проблему, специально установив семейство шрифтов в Material Icons на все mat-icon элементы на более высоком уровне.

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

Хотя я вообще рекомендую против использования !important в CSS - это кажется разумным местом для его использования, поскольку никакой другой шрифт не должен загружать эти значки, кроме Material Icons Шрифт, если вы хотите предотвратить Flash из Unstyled Text.