I am using Icomoon's icons for my jQuery Mobile/Python PyramidHo app. I am currently testing on localhost but the problem also exists when I deploy. They work perfectly for Chrome and Firefox. They do not show up in Internet Explorer 11. As far as I can tell they are not even being loaded by Internet Explorer.
I have read as much as I could about the problem with no luck.
I have placed the following meta tag at the top of my tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I have added the html5 shiv:
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"> </script>
<![endif]-->
My response has these settings:
response.cache_control.no_store = (bool) False
response.pragma = None
I'm using the icon like so:
<a href="demo_home" data-role="button" class="mp-menu-btn">
<span class="mp-circle mp-bg-drkblue mp-menu-btn-icon-bg"></span>
<svg class="icon icon-home2 mp-menu-btn-icon"><use xlink:href="/static/graphics/icons/symbol-defs.svg#icon-home2"></use></svg>
<span class="mp-btn-text mp-font-xlg">Demos</span>
</a>
How can I get the svg file to load and the icons to show up in Internet Explorer?
EDIT
After doing some more debugging I can clearly see the request for the SVG icon file is not even getting to my backend pyramid server. IE is blocking or disregarding the request.
I've suffered through this before. IE ignores all external calls to SVG. The easy answer is to include your <symbol> defs in the body of your HTML. Since these <symbol>s are hidden anyway, they won't disturb any other DOM elements. Then you'll have to xlink to the current page.
<use xlink:href="#icon-home2"></use>
If you're sickened by muddying your beautiful page with a barrage of <symbols> (hey, it's a reasonable disgust), use svg4everybody and force IE to bend to your will.