Material Design Icon isn't working on IE 11

Question

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.

Solution

The problem could be related to CSS loading.

Try hosting the CSS locally, this solved the issue for me.

https://github.com/GwtMaterialDesign/gwt-material/issues/149#issuecomment-158004329