MD Icons not working on IE 11

[danvc]

I'm using MaterialDesign icons on my application, however, it isn't working on IE 11 (version 11.576.14393.0).

In my HTML code, I have the following element:

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

However, I also tried the normal icon name such as:

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

It's working on other browsers, and all the .css features are from the boilerplate that I got on Material Design's page.

Nothing is appearing to me on my page.

I tried to set the following styles:

text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
ms-font-feature-settings:'liga'

However, nothing is working.

[bsh314]

+1

[allen-gopico]

+1

[fernandominardi]

+1

[Narcwis]

+1

[elmokono]

+1

[shyndman]

Sorry you're all running into this.

I can't seem to reproduce this issue in a VM. Can someone please take a look at http://codepen.io/shyndman/pen/aJpygO in IE11 and let me know whether or not they can see the icons?

[fernandominardi]

I'm not sure what's going on, but I tried the codepen.io link and it worked. Then, assuming that there must be some difference in the code, I just copy-pasted the css in that codepen.io link into my code, AND IT WORKED in my project as well, :-)

[shyndman]

That's great! Can you confirm that you changed the URLs to point to local font files?

[shyndman]

One more thing – when you were setting up your project, did you use CSS from here: http://google.github.io/material-design-icons/#setup-method-2-self-hosting

If not, where did the CSS come from?

[fernandominardi]

I made just a quick test, so I didn't changed the URLs. Sorry, but I'm not sure where the CSS came from, it was included by another developer.

Now that I'm checking the code, I realize that it was just our mistake. Only the woff2 font was being included. So, to avoid any other issue, I just included material icons using the Google Web Fonts method, and it worked very well.

[shyndman]

Great!

I'm going to mark this closed.

[liranh85]

I was trying to fix a bug where IE11 would not display Material Icons created using pseudo elements using content: 'icon-name'. Adding the following line to the pseudo element fixed the bug for me: font-feature-settings: 'liga';

[ashnewport]

I had this issue in IE11 today and @liranh85 saved the day by suggesting to add font-feature-settings: 'liga'; to the pseudo element. That solved my problem. Thanks @liranh85 !

[jakob-e]

Please note that font-feature-settings is a low-level property. Why it might be a good idea to also include other ligature settings e.g:

body {
    text-rendering: optimizeLegibility;
    font-kerning: normal;               
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
}

(vendor prefixes omitted)

[AlidaContreras]

Me pasaba lo mismo, pense que el material icons no era compatible con la versión 11 de IE pero segun documentación si son compatibles, ahora como el material icons utiliza una fuente de letras y no imagenes, se tiene que insertar un codigo en el css para que lo reconozca como tal:

@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(dist/font/MaterialIcons-Regular.woff) format('woff'); }

.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; / Support for IE. / font-feature-settings: 'liga'; }

Pero ni así se veían los iconos en el IE, encontre muchas respuestas sobre las ligaduras y agregue las dos ultimas lineas del codigo: /* Support for IE. */ font-feature-settings: 'liga';

Pero ni así!!!! hasta que un dia me di cuenta de esta linea: src: url(dist/font/MaterialIcons-Regular.woff2) format('woff2');

la busque y hay 3 tipos de fuente que brinda el material icons:

url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype');

Probé con una de esas y me funciono!!!

[andoitz]

I just got the same issue. In my case it was a missunderstood between the fonts urls when compiling on /dist folder.

[axman]

This was not working for me when I used only the .woff2 file. Including the .woff and .ttf files as well fixed IE11 for me. Ex:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

[kranthikadechur-k]

Thanks all, my issue resolved

[MrHus]

I did not use the npm package but the fonts at gstatic and this fixed it for me:

You can change the version by changing v48 to v50 for example:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
 src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot)
      format('eot'),
    url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
      format('truetype'),
    url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff)
      format('woff'),
    url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
      format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

[lsalazarm99]

@MrHus do you have the link for the .otf file? .ttf doesn't contain the glyphs' name like the other Material Icons Styles' files.