Resource not rendering in IE 9 - css

Question

I have a web page that is using an icon font. This web page works fine in Chrome, Firefox, and Safari. It works fine in Edge and IE 11. However, I need to support IE 8, 9, and 10 as well. My problem is, that in IE 8, 9, and maybe 10, the icons don't appear. You can see the problem with this Bootply. In it, I have the following code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<div class="container">
<ul class="list-inline">
<li><span class="material-icons">alarm_on</span></li>
<li><span class="material-icons">alarm_off</span></li>
</ul>
</div>
What makes this confusing is that I don't see any errors. I'm not sure what's wrong. I've also copied the font files locally from here. I've added the font files to my app in a folder called /resources/fonts. In my application's css file, I've added the following at the top:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/resources/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('/resources/fonts/Material Icons'),
local('/resources/fonts/MaterialIcons-Regular'),
url(/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/resources/fonts/MaterialIcons-Regular.woff) format('woff'),
url(/resources/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
While this works in Chrome, Firefox, and Safari, it still doesn't work in IE 8 or 9. What's wrong?

Answer 1

You should use different HTML for IE9 and lower. You can find it on the material icons website here for alarm_on and here for alarm_off.
So it should be:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<div class="container">
<ul class="list-inline">
<li><span class="material-icons"></span></li>
<li><span class="material-icons"></span></li>
</ul>
</div>

Answer 2

The font is supported in IE, but only IE versions 10 and for lower, you can use hexadecimal encoding.
Here it's example and it's work perfectly in IE9.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<i class="material-icons"></i>
<i class="material-icons"></i>
For more details you can check here