Icon Fonts Not Loading in Ie11

Icon fonts not loading in IE11

Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.

Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.

https://github.com/FortAwesome/Font-Awesome/issues/6454

IE 11 sometimes preventing the display of font-awesome webfonts

IE Security Settings

I have noticed sites in the "Restricted Sites" (in Internet Explorer) do not show font awesome whereas sites in "trusted sites" zone do.

So I'd guess the issue is with different IE security settings for different users.

Can you ask users to check / change their options in IE e.g. (instruction for IE 11 but others will be very similar) :

Settings Cog (icon in top right)
Internet Options (menu option)
Security (tab)
Sites (button)
Enter the website address for your site
Click Add (button)

N.B. if you are not using https you may also need the option

"Require server verification (https:) for all sites in this zone" -
to be deselected

Request a User makes these changes and then troubleshoot from there.

Fiddler to debug

If you have access to any of the user's machines, can remote in, or have any advanced users you can guide then could also attempt to debug using the excellent Fiddler http proxy on their machine to see what is happening at the http request / response level.

You can also change your own IE security settings to see if you can replicate the problem

Font Awesome 4.2.0 not rendering in IE11 with Compatibility Mode turned On

Found the solution. <meta http-equiv="X-UA-Compatible" content="IE=edge"> needs to be placed as the FIRST tag in the <head> in order for it to work. Hope this helps anyone else who has this issue!

IE loads sometimes WOFF and sometimes EOT font type

Well, I have finally changed the way to use Material Icon font.

I deleted the following line in my index.html file :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I installed material-design-icons package via NPM and I configured the styles section of my angular-cli.json file to point on the css file like this :

"styles": [
    "<relative_path>/node_modules/material-design-icons/iconfont/material-icons.css"
]

Now, IE11 always loads WOFF type.

Problem solved!

Icon Fonts Not Loading in Ie11