I have an angular app with two font icons in a given screen. These are rendered just fine in chrome, firefox and edge, but on IE 11 they do not display. The icons are to be rendered as the content
of the :after
pseudo class, which according to my research should work fine on IE 9 and up. However, on IE, these are simply not rendered.
As you can see in the screenshot, the :after element is not in the DOM displayed in the dev tools, and the css is correct but shows crossed out in dev tools:
The relevant CSS that is compiled and actually used in the screen showing the issue is like so:
.profile-picture[_ngcontent-vem-9]:after {
font-family: Material Icons;
content: "\E3B0";
font-size: 48px;
top: 32px;
left: 25px
}
.profile-picture[_ngcontent-vem-9] .title[_ngcontent-vem-9],
.profile-picture[_ngcontent-vem-9]:after {
display: block;
position: absolute;
color: #9e9e9e;
transition-duration: .3s
}
The rules above the crossed out ones are unrelated. But since someone asked to see them, here they are:
The question is: why is this happening, and how to fix it?