Material-components-web-components: mwc-icon can show raw texts at initial loading

[kkimdev]

For example, the demo page https://material-components.github.io/material-components-web-components/demos/icon.html can render the raw icon name texts initially

Easier to reproduce if js is not inlined, and with disabling network cache and throttling network speed using dev tool.

[kkimdev]

mwc-button with icon has the same issue

[kkimdev]

FYI I also opened an issue at material-components-web repository and had some discussions there: https://github.com/material-components/material-components-web/issues/3718

[RyanAfrish7]

This makes the website look ugly when loading fonts. Please fix (or workaround) this soon.

[johnthad]

I'm pretty sure this flash of text is due to loading time of the WOFF2 font file that makes up mwc-icon's glyphs. I don't like that design for several reasons:

1. Why should my page bear the weight of the entire WOFF2 file for a couple of glyphs?

2. What if I need icons that are _not_ in the WOFF2 file?

3. The font seems to be downloaded only when the icon is first created. There should be a way--without knowledge of the element's internals--to download and cache the font beforehand, maybe with a service worker.

4. Worse for my applications is that the font does not seem to be in my app, but is downloaded from fonts.googleapis.com. Some of my installations are behind corporate or government firewalls without access to the outside whatsoever.

Polymer 2's paper-icon-button supported a local, limited set of glyphs. If mwc-icon is a replacement, it should behave similarly. For my purposes it seems I'm better off creating my own custom element.

[aomarks]

We just added some documentation to our main README that shows how to load the Material Icons font in a way that avoids this flash of text, and also lets you choose how and from where your font files are loaded:

https://github.com/material-components/material-components-web-components#fonts

Here are the new recommendations:

1) Load fonts (both Roboto and Material Icons) early in your HTML file with a <link> tag. This means the font will start downloading as soon as possible (before JavaScript executes).

2) We suggest using fonts.googleapis.com, but you could also download the font files and serve them however you want. Supporting alternate ways of loading fonts is the main reason we no longer recommend using the mwc-icon-font.ts module that automatically loads the font from this URL.

3) Use font-display: block in your @font-face rule when you load Material Icons (but not Roboto). This prevents the ligature text from displaying in-place of an icon while the icon font is still loading. You can tell fonts.googleapis.com to do this by adding &display=block to the URL. The fonts.googleapis.com example shown in our README already includes this.

Hope that helps! Closing for now, please re-open if this does not solve your problem.