Open kkimdev opened 5 years ago
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:
@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:
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?
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):
font-display
property is not supported in IE 11 and Edge, so that's a no-go for us.FontFaceObserver
is also a no-go.But just because we can't do those things doesn't mean that you can't 😀
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.
I fixed this problem in my PWA after added material fonts on local.
npm install material-design-icons
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![image](https://user-images.githubusercontent.com/503414/46647997-c1d6da80-cb47-11e8-80b1-dbace57de6a7.png)