mat-icon shows text before showing properly

[probert94]

Bug, feature request, or proposal:

Bug or feature request.

What is the expected behavior?

When using <mat-icon>home</mat-icon>, nothing should be displayed until the icon is loaded properly. As soon as the icon is loaded, it should render.

What is the current behavior?

Depending on the speed of your connection, it is possible, that you see the text (for example home) instead of the icon.

What are the steps to reproduce?

1. Start the Angular Material Icon example in Stackblitz.
   It might be better to open it in it's own tab.
2. Open the Developer-Tools (in Chrome) and under the Network-Tab choose a very slow network throttling profile. This is needed, as the sample app is very small and therefore the problem is not noticeable with normal connections.
3. Reload the page and wait until it is loaded. You will see something like this:
   
   After some time it shows the icon:
   

What is the use-case or motivation for changing an existing behavior?

In an app I am currently working on, this happens pretty often. Even if I only change the route (which does not trigger a reload of the page) I often see the text of the icons before the icon is displayed properly, so it does not seem to be related to the loading of the icon font.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I am using @angular/material 6.3.1 together with TypeScript 2.7.2 on a Windows 10 PC.
The problem occures at least on Chrome, Opera, Firefox and Edge.

[probert94]

I just noticed, that the problem in my app was actually the change-detection. I am using CdkPortal and CdkPortalOutlet to dynamicaly change the ocntent of my app-bar (including some mat-icons).
As I am using ChangeDetectionStrategy.OnPush, I had to call detectChanges() after changing the content.
However, you can still see the text, while the font is loading. On normal connections it isn't really noticeable, but if you have a slow connection, the text stays for a while.
I guess it would be good, if the icons don't show anything as long as the used font is not fully loaded.
Not sure, if thats even possible...

[jelbourn]

Going to close this as "working as expected". The component on its own doesn't have a good way of knowing when the icon font is loaded. If your app knows when the assets are loaded, you can hide the icons until then, or you can potentially fall back to pngs or svgs.

[thw0rted]

@jelbourn would you reopen this if the component does in fact have a good way of knowing when the font is loaded?

if ("fonts" in document && !document.fonts.check(iconFontName)){
  document.body.classList.add("mat-icon-font-missing");
  document.fonts.load(iconFontName)
    .then(() => document.body.classList.remove("mat-icon-font-missing"));
}

CSS should be easy enough once you have that. Of course, this doesn't avoid the FOUT for IE/Edge users, but there's just no helping some people.

[jelbourn]

@thw0rted Interesting, I didn't know about that API. We would need some way to know the name of the icon-font being used, since it isn't always necessarily the Material Design icon font. I imagine this would become a new optional setting on the icon registry. It's something that would be good for a community PR.

[thw0rted]

Is the icon registry responsible for the default behavior today? The docs say "By default, expects the Material icons font" with a link to instructions on including the @font-face definition. I was going to suggest a universal / top-level "icon font not loaded" class, but of course with the registry you can have an arbitrary number of fontSet so you'd need to do the above logic for each font in use.

And I see what you were saying in your original response, none of the current registry methods seem to care about the font name. Moreover, it appears to be possible to use font-based mat-icon without touching the registry at all -- I haven't done it myself, but it sounds like you just need to set the fontSet / fontIcon params. I guess this sort of behavior would need to either be added to a current call (like an extra parameter for registerFontClassAlias) or just be exposed as a new method.

[jelbourn]

Yeah, the registry has the default icon font css class. So in addition to that class, it would need to know about the font name.

[anymos]

Hi there,

document.body.classList.add("mat-icon-font-missing");
document.fonts.load(iconFontName)

Please keep in mind that it might break universal if you refer to classList

[thw0rted]

When you say "break universal", I guess technically Material2 could support IE9 but that's the only outlier I see on the list and frankly, if you're stuck on IE9 you have bigger problems in your life 😒

[kwalski]

just checking if there is any PR WIP on this?

[NodeSwapCeo]

When you say "break universal", I guess technically Material2 could support IE9 but that's the only outlier I see on the list and frankly, if you're stuck on IE9 you have bigger problems in your life 😒

Not sure about IE9, universal is server side rendering ;-) fortunately I am not stuck with IE9 aahahah