SVG Icon Issues IE11 / Windows 10

In IE11 on Windows 10, icons do not show up.

by Glen Cheney

HTML

<div class="icon-wrapper">
  <svg class="icon">
    <use xlink:href="#icon-chevron-down"></use>
  </svg>
  Using <code>div</code>
</div>

<hr>

<button class="icon-wrapper">
  <svg class="icon">
    <use xlink:href="#icon-chevron-down"></use>
  </svg>
  Using <code>button</code>
</button>

<hr>

<a href="javascript:void(0)" class="icon-wrapper">
  <svg class="icon">
    <use xlink:href="#icon-chevron-down"></use>
  </svg>
  Using <code>a</code>
</a>

CSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

svg:not(:root) {
  overflow: hidden;
}

.icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  fill: mediumseagreen;
}

button {
  padding: 0;
  background: 0;
  border: 0;
}

.icon-wrapper {
  font-size: 16px;
}

JavaScript

/**
 * Fetches the SVG file and prepends it to the <body>. This allows the browser
 * to cache the icons.svg file. It uses insertAdjacentHTML, which is cross
 * browser (IE 5.5!) and, unlike innerHTML, the entire contents does not need to
 * be parsed again - just what was added.
 */
(function(path, xhr) {
  'use strict';
  xhr.open('GET', path);
  xhr.setRequestHeader('Content-Type', 'text/xml');
  xhr.send();
  xhr.onload = function() {
    if (document.body) {
      insert();
    } else {
      document.addEventListener('DOMContentLoaded', insert);
    }
  };

  function insert() {
    document.body.insertAdjacentHTML('afterbegin',
        '<div style="position:absolute;visibility:hidden;height:0;width:0;">' +
        xhr.responseText + '</div>');
  }
})('https://dl.dropboxusercontent.com/u/5433200/icons.svg', new XMLHttpRequest());