Material-design-icons: Material Icons web font not working on Android 4.4.4

[zilions]

Have tested the official Google Material Icons web page on Android emulators (Genymotion and the one built into Android Studio). Both web browsers fail to load the web font and instead use the bundled icons, hence using the same icon for many different keywords. For example, the exact same clock icon is used for all the alerts. Many icons don't even display since they don't have an alternative/fallback.

[shyndman]

Hey.

Android has bundled icons?

[nicooprat]

Almost same problem here, with Android 6: icons are not rendered, bug the original text is (like "shopping_cart"). I guess the real issue here is that we're using the default stock browser (it doesn't support ligatures), which is "deprecated" in favor of Chrome.

I guess guys from Genymotion don't have the right to embed Chrome with their VMs (licenses issues I suppose).

To install Chrome on Genymotion, just download an APK for the target version and drag'n'drop it on the Genymotion window (when running). No need to install and connect Google Play Services (I struggled a few hours before figuring this out...).

Material icons are working fine on Chrome 49 with Android 4.4.4.

[vtellez]

https://github.com/google/material-design-lite/issues/1375

[ltfschoen]

I added the Crosswalk plugin to my Ionic 1 project to get the Material Design Icons working when I run my app on an Android Virtual Device (AVD) emulator using older Android versions such as to 4.1.2 (and including 4.4.2). I performed the following steps to get it working:

First I followed this guide to install Material Design Icons with Bower (latest version 2.2.3)

bower install material-design-icons#2.2.3

I then added the code shown in "Setup Method 2. Self hosting" of the guide at the above link into my Sass file. I made the URLs point to the library files relative to my locally compiled CSS directory i.e.

@font-face { 
... 
src: url('../lib/material-design-icons/iconfont/MaterialIcons-Regular.eot');
src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('../lib/material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
       url('../lib/material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
       url('../lib/material-design-icons/iconfont/MaterialIcons-Regular.ttf')
}

.material-icons {
...
}

To reduce the build time deleted all files and subdirectories in /lib/material-design-icons/ except for the those containing files you are using (i.e. if you are only using Material Design Icons then just keep /lib/material-design-icons/iconfont/ subdirectory).

I deleted the subdirectory /platforms/android

I then ran the Android AVD and deleted previously installed versions of the app. i.e. Menu > Settings > Apps > [Click Relevant App] > Uninstall

I then installed crosswalk following the steps at its GitHub repo

cordova plugin add cordova-plugin-crosswalk-webview
cordova clean

I updated my manifest file (i.e. config.xml) and changed the minimum supported Android SDK version to 14 (i.e. Android 4.1.2)

<preference name="android-minSdkVersion" value="14"/>
<preference name="xwalkVersion" value="19+"/>

I re-added the android platform into subdirectory /platforms/android

ionic platform add android

I created an Android Virtual Device for Android 4.4.2 (API level 19)

android avd

I added some Material Icons to my HTML (i.e. <i class="material-icons">mode_edit</i>) and ran the emulator. The Material Design Icons now appear correctly

ionic emulate android -lcs --stacktrace --info --debug

[theavijitsarkar]

Cross walk is not a solution. It adds 10-30mb of junk

[ltfschoen]

@snowbreeze What "non-junk" alternative solution (i.e. <10mb) are you able to propose?

[theavijitsarkar]

I was able to get it working by using the unicode inplace of the full name of the icon.

@ltfschoen If I could propose a solution, i would have already

[campagna91]

@theavijitsarkar where's is possibile to find a complete unicode icons list?

[damianwajer]

@campagna91 You can find icon codepoints here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

then instead of using

<i class="material-icons">face</i>

you can use

<i class="material-icons">&#xe87c;</i>