<h1>Fallback Inline SVG icons using JS</h1>
<div class="svg-defs">
<svg>
  <symbol id="svg-status" viewBox="-20 -20 40 40">
    <title>SVG OK</title>
    <circle fill="limegreen" r="19" />
    <path stroke="forestgreen" fill="none" stroke-width="6"
          d="M-12,3 L-3,10 11,-12" />
    <text dy="0.35em" text-anchor="middle" font-weight="bold"
          font-size="18px" font-family="sans-serif"
          fill="indigo">SVG</text>
  </symbol>
</svg>
</div>
<p>Somewhere in the text...
<svg class="icon">
  <use xlink:href="#svg-status" />
</svg>
...there is an icon</p>
.svg-defs {
  position: absolute;
  height: 0; width: 0;
  overflow: hidden;
}
svg.icon {
  display: inline-block;
  height: 2em;
  width: 2em;
}
p {
  font-size: 125%;
}
.fallback {
  padding: 0 12px;
  background-position: center;
  background-color: #AAF;  
}
.svg-status {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/svg-no-24x24.png');
}
var u = document.getElementsByTagName("use");
if (!u.length) {
		u = document.getElementsByTagName("USE");
}

if (u.length && (!(u[0].ownerSVGElement) )) {
  for (var i=0, n=u.length; i<n; i++){
    var use = u[i],
    		span = document.createElement("span"),
        href = use.getAttribute("xlink:href").substring(1);
    span.setAttribute("class", "fallback " + href);
    use.parentElement.insertBefore(span, use);
  }     
}

External CSS

  1. https://codepen.io/AmeliaBR/pen/607cb7712555f8d347794ffd3835672d.css

External JavaScript

This Pen doesn't use any external JavaScript resources.