Material-design-icons: Icons missing on IE Mobile if used from Google Web Fonts
It seems that when using material icons through Google Web Fonts .material-icons has font-feature-settings: 'liga’; depending on user agent string.
With Windows Phone 8.1 depending on browser settings website preference the user agent string changes. It has two options, mobile or desktop version. Mobile version setting is set by default.
For example with my Lumia 720 if website preference is set to mobile version user agent string is:
Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 720) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
If preference is set to desktop version it is:
Mozilla/5.0 (Windows NT 6.2; ARM; Trident/7.0; Touch; rv:11.0; WPDesktop; Lumia 720) like Gecko
With mobile version UA string the css doesn't have font-feature-settings: 'liga’; at all so icons won’t work with Windows Phone Internet Explorer 10. Info of User-agent string changes on IE11
Add unprefixed format of font-feature-setting like it is on self hosting instructions for Google Web Fonts version so it will work with Windows Phone 8.1.
Why not add the prefixed and unprefixed for every user agent string for better support?
artotoivanen
All 19 comments
Thanks @artotoivanen,
I've reported the omission to the fonts team.
shyndman
on 28 Jul 2015
Any solution for this? if I host font on my server will it work?
jitendravyas
on 15 Aug 2015
@jitendravyas There may be a possible fix. Using Element Inspector in Chrome, I noticed that the other mobile devices had an additional declaration: text-rendering: optimizeLegibility; but the Windows Phones did not have this. When I added text-rendering: optimizeLegibility; to .material-icons the icons appeared. I do not have a Windows Phone to test this on, so could anybody confirm or deny that this is a workaround?
kylelavery88
on 15 Aug 2015
@koenigsegg1 That is highly interesting. @jitendravyas If possible, please give that a try and let us know if that changes anything.
surma
on 15 Aug 2015
@koenigsegg1 @surma This combination is working on my windows phone 8.1
<style>
.material-icons {text-rendering: optimizeLegibility}
</style>
<i class="material-icons"></i>
jitendravyas
on 15 Aug 2015
Yes, you have to use the symbol version of the names for IE. So instead of writing error you have to write 
I added the following to my stylesheet :
i.material-icons {text-rendering: optimizeLegibility; }
I contacted a fried who uses Windows Phone and it works for him too.
kylelavery88
on 16 Aug 2015
@jitendravyas When you use this from web fonts just add this in your css:
.material-icons {
font-feature-settings: 'liga';
}
It will fix the problem with Windows Phone 8. If you check material icons guide for self hosting setup method you can see that this line is already added like this:
/* Support for IE. */ font-feature-settings: 'liga';
The only problem with web font is that it adds this line depending on UA string and windows phone 8 is pretending to be webkit.
artotoivanen
on 18 Aug 2015
In case it’s relevant: Can also confirm that .material-icons { font-feature-settings: 'liga'; } fixes the issue with IEdge on Win 10.
surma
on 27 Aug 2015
the font-feature-setting: 'liga' did not work for me. i'm on win10
jig9
on 31 Aug 2015
Are you using the code with support for IE? e.g. <i class="material-icons"></i>
Or are you doing it this way. e.g. <i class="material-icons">accessibility</i>
If you didn't use the first method, I don't think it will work. If neither method works try the method that I suggested in my comments above.
kylelavery88
on 31 Aug 2015
I got a Chinese/Japanese Character.
jig9
on 31 Aug 2015
@jig9 The icon font is not for normal text but for icons only, it should therefore be irrelevant what language you are using. All the icons listed on the font’s website are available to you.
surma
on 31 Aug 2015
i meant i used the code you gave, and i got a chinese/japanese character. However, instead of self-hosting, i used the link from google. That erased a lot of headaches.
jig9
on 1 Sep 2015
Be shure to include all fonts. Woff2 only supports Webkit.
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('fonts/gm.eot'); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(fonts/gm.woff2) format('woff2'),
url(fonts/gm.woff) format('woff'),
url(fonts/gm.ttf) format('truetype')
}
cosmopolit
on 23 Mar 2016
Is support for Edge for being able to use the icons with the textual description rather than the character code going to be fixed at some point or is this something Edge needs to address?
I am quite reluctant to switch all our classes to character codes due to no longer being able to know what icon's what when browsing the code.
adamreisnz
on 31 Jan 2018
I've created a build too that replaces ligatures with the unicode character code for you: https://www.npmjs.com/package/material-icon-convert
This way you can develop using ligatures but the HTML for your build will contain character codes, which hopefully work in Edge or windows mobile IE.
adamreisnz
on 1 Feb 2018
Hey @adamreisnz @cosmopolit @jig9 @surma @kylelavery88 @artotoivanen @jitendravyas
This project is on low maintenance and out of date for a while.
The lack of updates + development support issues also bothered me. I've forked this repo, added support for scss, removed irrelevant files and updated the fonts with the latest straight from Google's CDN.
Check it out: material-design-icons-iconfont
jossef
on 27 Oct 2018
@jossef looks good, have you also considered/addressed the various inconsistency, duplication and naming issues, as well as the inability to search for icons properly?
adamreisnz
on 27 Oct 2018
@jossef looks good, have you also considered/addressed the various inconsistency, duplication and naming issues, as well as the inability to search for icons properly?
Thanks, It's a future task (you are welcome to hop-on the train and contribute a PR)
https://github.com/jossef/material-design-icons-iconfont/issues/20
jossef
on 27 Oct 2018
Related issues
nielsenramon
·
52Comments
sabinebarrera
·
69Comments
JSMike
·
29Comments
fallXone
·
52Comments
asadovsky
·
39Comments
Most helpful comment
In case it’s relevant: Can also confirm that
.material-icons { font-feature-settings: 'liga'; }fixes the issue with IEdge on Win 10.