MDL Icons not displaying properly in Android WebView

[Andy561]

I tried to see if there may have been someone who posted something similar, but I couldn't find anything so I figured I would mention.

We have a client running a trial application, therefore I don't have direct access to test on the older versions of Android. However, in a WebView in Android 4.1 icons do not display. In Android 4.4, the icons display however some of them are incorrect. Not sure if this may have to do with CSS/HTML/JS support or not but I thought I would bring this issue to attention.

ANDROID 4.1

ANDROID 4.4

ANDROID 5.0 / iOS / Chrome (desktop) /Firefox (desktop) / How it's supposed to look

[surma]

@Andy561 Thanks for the bug report. We’ll try to reproduce.

In the meantime: Would you mind adding screenshots to the issue itself (you can drag'n'drop into the textfield!)? I can’t open the links you have provided (access denied).

[Andy561]

@surma Whoops, sorry about that. Fixed the images, sorry the top two are kinda bad, but its enough to see the issue.

[sgomes]

Adding the 1.0.3 milestone to see if we can get a fix by then.

[surma]

Hey @Andy561, I finally got all my emulators running 💻

As it turns out, Android 4.1 WebView does not support ligatures at all. Android 4.4 does, but doesn’t know what to do if one ligature is a prefix of another, which is why your keyboard_backspace icon turns into a literal keyboard.

There’s nothing we can do about this, obviously, but there is a workaround: Code points ☝️
Go to the official icon font website, lookup the icons you are using and use the code point instead of the ligatures, like  for keyboard_backspace.

Hope this helps :)

[Manduro]

http://google.github.io/material-design-icons/ mentions support for ligatures on the Android browser from version 3, but as mentioned here it only works correctly on Android > 4.4, right?

[surma]

Hm,... you are right. Material Design Icons is claiming that they do indeed support Android Browser 3. Maybe I did something wrong? According to caniuse.com, there’s a bug with all Android Browsers < 4.4 which they describe as

Partial support in Android browser versions is due to a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render.

[Manduro]

Yes, I have looked into that. It causes problems rendering, but as far as I could tell it doesn't have to do with ligatures, which are just not supported.

I have spent a few hours trying to get it to work on Android < 4.4, but in the end I have rewritten all icons using html entities.

[Zuurkern]

How am I supposed to replace the hamburger menu icon ligature by a code point when it is generated automatically with JS? This is the most important icon of all and now it looks like it is doomed to never work in Android browsers :(

[Garbee]

It is already fixed for 1.1 @Zuurkern. We did that update internally.

The only way to fix in in 1.0.x is to run JS after-layout upgrade that changes the innerHTML of the icon's div.

[ghost]

Hi,

Thanks for the material design library, I am hitting similar issue where material switch is not showing properly in android API level 22. Please check image below:

[Garbee]

@pathakNishant Please file a new issue specifically for that issue.

[liluxdev]

This can help: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

[liluxdev]

I'm sure that such ligature coolness is the more performant way to implement material-icons on a modern browser. I don't have any benchmark, but i guess you choose that for that reason (lower repaints, lower css rule processing).

But anyway... why not offering ALSO some css helper classnames (like font-awesome, eg. class='material-icons mi-keyboard_backspace') with content:'<codepoint>'property? That may help for who wants to use an human-readable string for 'ease of coding' but also to ensure a larger browser support...

Why not add that class name way to your official wizard too?

In your current wizard, the suggestion 'For IE9 and below' may be misleading: IE<10 is a well-known crappy and non-modern browser, but not all developers consider an android 4.3 browser as crappy as IE9 and maybe want to support it, and trusting it without studying about css font ligatures may lead to this unwanted issue

[Garbee]

@CreativeProgramming This issue tracker is about Material Design Lite only. That icon customizer and what is provided are handled over in the Material Design Icons repository. Please file an issue there with your request for the proper team to triage and take any action if necessary.

Thank you.