Material-design-icons: MD icons not working in IE11

[Franckou31]

Hello,
I'm using MaterialDesign icons on my application, however, it isn't working on my IE 11 (11.0.9600.18952).
I have done several tests, it works on some laptop wih same version of IE, but doesn't works on another laptop. The same thing for my customers : some of my customers have the same problem with IE11, for other, it works.

Following instruction in issue https://github.com/google/material-design-icons/issues/536, I take a look at http://codepen.io/shyndman/pen/aJpygO in IE11 and I have the same problem: I cannot see the icons. I see the string "bug_report android goat build pregnant_woman shopping_cart".

Please, can you help me understand the problem ?

[mkmllr]

Removing the <meta http-equiv="X-UA-Compatible" content="IE=edge" /> tag helped in my case and is recommended by Microsoft:

Note Starting with IE11, document modes are considered deprecated and should no longer be used. Webpages that require legacy document modes to display properly should be rewritten to use features defined by modern standards. To learn more, see Compatibility changes in IE11.

There's more info about it on Microsoft's documentation page: specifying legacy document modes.

Should you still require this tag, you could also try manually setting the following css in your stylesheet:

.material-icons {
  /* Support for IE */
  font-feature-settings: 'liga';
}

This css property was not present for me in IE11 in some cases, due to the IE compatibility mode set by the meta tag mentioned before.

[tribridge-jonathanmbeck]

I found a similar issue where the Chrome/Mozilla/Edge versions were aligned properly, but in IE 11 I had to remove a font-size: CSS that was being applied to the <i>

[eguardiola]

I'm having the same issue. If i clear all cache and cookies the first time i enter the icons are displayed but after a page reload the icons are gone. :-(

[jossef]

Hey @eguardiola @tribridge-jonathanmbeck @mkmllr @Franckou31

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

[am-awais]

any update??
only material icons outlined not working in IE 11, on other browsers its working fine==== help please
<i class="material-icons-outlined">note_add</i>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

[severinkehding]

Maybe my comment on a differend Issue will solve that problem -> https://github.com/google/material-design-icons/issues/611#issuecomment-510035548

[coderDem]

Maybe my comment on a differend Issue will solve that problem -> #611 (comment)

This is not very helpful. My client have an global policy in the IE browser. This seems only an local solution.

[ThanosAlmighty]

Okay, it's been over a year and I'm running into the same issue. Can we please get some actual support from the team?

[bethtorres]

I was able to fix my problem by overwriting the 'display: inline-block' and changing it to 'display: inline' in the .material-icons {} styles.

[jtg-pics]

I'm having the same issue. If i clear all cache and cookies the first time i enter the icons are displayed but after a page reload the icons are gone. :-(

Having the exact same issue.