Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Icons aren't rendered in IE11 on Windows 10

See original GitHub issue

Bug, feature request, or proposal:

When e.g. <md-icon>home</md-icon> is used the icon isn’t rendered in Internet Explorer 11 (not edge mode) on Windows 10.

What is the expected behavior?

The icons should render.

What is the current behavior?

The icons aren’t rendered.

What are the steps to reproduce?

Go to https://material.angular.io/components/component/icon in IE11 (not edge mode) on Windows 10. The home icon isn’t rendered.

What is the use-case or motivation for changing an existing behavior?

Fix the bug.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Internet Explorer 11 (not edge mode) on Windows 10.

Is there anything else we should know?

The browser uses the following User-Agent header: "User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/8.0; .NET4.0C; .NET4.0E)"

Doing curl -H "User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/8.0; .NET4.0C; .NET4.0E)" https://fonts.googleapis.com/icon?family=Material+Icons returns css without the font-feature-settings: 'liga' rule. Requesting the same resource from other IE browsers seem to include dito. Manually adding that css rule makes the icons render.

Issue Analytics

State:
Created 6 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

4reactions

StephenWTurnercommented, Oct 26, 2018

I found moving <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to be the first tag in the <head> solved this problem. Source: https://stackoverflow.com/a/28490514/350188

3reactions

mcadencommented, Aug 30, 2018

@patrikbjork This definitely appears to be an issue with pulling it from google fonts. I had the same issue and it resolved simply by pulling the material-design-icons from npm instead and rolling node_modules/material-design-icons/iconfont/material-icons.css into my build.