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?

FOUT: Flashing of Unstyled Text – mwilson Feb 01 '22 at 21:04 — mwilson, Feb 01 '22 at 21:04

score 3 · Answer 1 · answered Feb 01 '22 at 21:04

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

score 1 · Accepted Answer · answered Jul 18 '16 at 12:08

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

answered Jul 18 '16 at 12:08

Will

292
4
16

See also https://github.com/angular/components/issues/12171#issuecomment-595831987 – Max Barraclough Feb 19 '21 at 19:26

Material Design Icons Flicker (FOUT?)

2 Answers2