Material Design Icons Flicker (FOUT?)

Question

I have noticed on my angular 2 app that in IE 11 all my material design icons will flicker the text before showing the actual icon. Is there a solution to this? Is there a way to use some sort of preloader?

Engird

Why the down votes? – Engird

FOUT: Flashing of Unstyled Text – Cordon

Answer 1

I was able to solve my problem by using WebFontLoader

for 'Material Icons' font. Then using CSS I was able to select and fade in all icons once they were loaded

Engird

See also github.com/angular/components/issues/… – Primitive

Answer 2

An extremely simple way to solve this is to append display=block to the end of the URL.

For example:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet" />

See the comment here: https://github.com/angular/components/issues/12171#issuecomment-769333603

Cordon