Material-components-web: [Bug] icon-button shows raw text at initial loading

[kkimdev]

Bugs

What are the steps to reproduce the bug?

Navigate to https://material-components.github.io/material-components-web-catalog/#/component/icon-button . Easier to reproduce with networking cache disabled in Chrome dev tool

What is the expected behavior?

What is the actual behavior?

The following icon raw texts shows at initial loading

[acdvorak]

Thanks for filing this issue and including the helpful screenshots!

I agree that this is not the best UX. However, the behavior you're seeing (FOUT) is actually an intentional accessibility feature:

• If the font fails to load for some reason (e.g., poor network connectivity), the user will still be able to see the plain-text name of the icon, which is better than displaying nothing at all (FOIT)

• Users on slow networks (especially in developing countries) often disable custom web fonts to speed up page loading, so hiding icon text until the font loads would break all icons for them

• Some people with dyslexia override website fonts with Open Dyslexic (Chrome extension), so clipping overflow would make icons unreadable

I know it's not ideal, but I strongly recommend keeping this behavior as-is to ensure that everybody can use your website.

If you really want to hide the text, there are two options I'm aware of:

1. CSS font-display property (not supported in Edge or IE)
2. JS FontFaceObserver library (requires JS)

[kkimdev]

@acdvorak I see. Thanks for the context! I haven't thought about from the accessibility perspective.

Though I still hope there is an easy way to control the behavior. For the app I'm working on, I use mwc-button and looks like this:

• Initial:
  
• Fully loaded:
  

I originally filed the issue against icon-button because that's what's used under the hood. But in this case, unlike icon-button, since the icons are just decorations, it's actually better not to have the icon text at all even from accessibility perspective.

I guess it make sense to keep icon-button's behavior as it is. How about hiding icon texts from regular button with icon and mwc-button by default?

[acdvorak]

Ahh, good point.

@abhiomkar suggested that we set overflow: hidden on icons inside an mdc-button, which would at least prevent the overlapping text issue. We can definitely look into adding that.

However, it's probably not feasible for us to hide the text completely (at least in MDC):

• The CSS font-display property is not supported in IE 11 and Edge, so that's a no-go for us.
• We try to avoid bundling external dependencies in MDC Web, so FontFaceObserver is also a no-go.

But just because _we_ can't do those things doesn't mean that _you_ can't 😀

[kkimdev]

Thanks!! I think even just preventing the overflow is a massive improvement. Maybe I'm OK with that for now for my website, though I have to try.

Btw just FYI, I noticed if the icon font is locally cached, Chrome doesn't render the initial text, but Firefox and Edge still renders the initial text.

[Wlada]

I fixed this problem in my PWA after added material fonts on local.
npm install material-design-icons