Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Icons missing on IE Mobile if used from Google Web Fonts #179

Closed
artotoivanen opened this issue Jul 24, 2015 · 20 comments
Closed

Icons missing on IE Mobile if used from Google Web Fonts #179

artotoivanen opened this issue Jul 24, 2015 · 20 comments
Labels
bug

Comments

@artotoivanen
Copy link

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?
@shyndman
Copy link
Contributor

Thanks @artotoivanen,

I've reported the omission to the fonts team.

@shyndman shyndman added the bug label Jul 28, 2015
@filippomartini filippomartini mentioned this issue Aug 1, 2015
Closed
@jitendravyas
Copy link

Any solution for this? if I host font on my server will it work?

@kylelavery88
Copy link

@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?

@surma
Copy link

surma commented Aug 15, 2015

@koenigsegg1 That is highly interesting. @jitendravyas If possible, please give that a try and let us know if that changes anything.

@jitendravyas
Copy link

@koenigsegg1 @surma This combination is working on my windows phone 8.1

  <style>
  .material-icons    {text-rendering: optimizeLegibility}
  </style>
  <i class="material-icons">&#xE038;</i>

img_20150816_033013

img_20150816_033037

@kylelavery88
Copy link

Yes, you have to use the symbol version of the names for IE. So instead of writing error you have to write &#xE000;
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.

@artotoivanen
Copy link
Author

@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.

@surma surma mentioned this issue Aug 25, 2015
Closed
@surma
Copy link

surma commented Aug 27, 2015

In case it’s relevant: Can also confirm that .material-icons { font-feature-settings: 'liga'; } fixes the issue with IEdge on Win 10.

@jig9
Copy link

jig9 commented Aug 31, 2015

the font-feature-setting: 'liga' did not work for me. i'm on win10

@kylelavery88
Copy link

Are you using the code with support for IE? e.g. <i class="material-icons">&#xE84E;</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.

@jig9
Copy link

jig9 commented Aug 31, 2015

I got a Chinese/Japanese Character.

@surma
Copy link

surma commented Aug 31, 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.

@jig9
Copy link

jig9 commented Sep 1, 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.

@surma surma mentioned this issue Sep 9, 2015
Closed
@cosmopolit
Copy link

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')
}

@tilwinjoy tilwinjoy mentioned this issue Jun 6, 2016
Merged
@tuckerconnelly tuckerconnelly mentioned this issue Jan 15, 2017
Closed
@tomscholz tomscholz mentioned this issue Apr 1, 2017
Closed
@adamreisnz
Copy link

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
Copy link

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.

@jossef
Copy link

jossef commented Oct 27, 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

image

@adamreisnz
Copy link

adamreisnz commented Oct 27, 2018 •
edited

@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?

@jossef
Copy link

jossef commented Oct 27, 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)
jossef#20

@alexanderadam alexanderadam mentioned this issue Jan 16, 2019
Closed
@RoelN
Copy link
Collaborator

RoelN commented Feb 23, 2021

Closing this issue because I believe it has been addressed. If not, feel free to reopen this issue or create a new one with more information.

@RoelN RoelN closed this as completed Feb 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@shyndman @jitendravyas @surma @adamreisnz @jossef @artotoivanen @cosmopolit @RoelN @kylelavery88 @jig9