Custom SVG Icons in IE 11 inside Lightning Component not rendering

Question

I know this has been asked a lot and with revamped extended IE 11 support for Lightning by Salesforce, the issue with SVG icons in Lightning Component arise again. I've been through the forum questions again and nothing seems to work in IE 11 when it comes to a Custom SVG icons referenced from a Static Resource.

I have tried svg4everybody, even though I'm not sure if it works with Locker Service or not, but it has not generated the icons for me from SVG <use> tag href values.

I've a custom SVG icon file in a Static resource, and I use the custom SVG helper component to place my SVG icon in the markup.

svg.cmp Lightning Component:

<aura:component access="global">
    <aura:attribute name="class" type="String" description="CSS classname for the SVG element" access="global" />
    <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" access="global" />
    <aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" access="global" />
</aura:component>

svg.com Renderer:

({
    render: function(component, helper) {
        //grab attributes from the component markup
        var classname = component.get("v.class");
        var xlinkHref = component.get("v.xlinkHref");
        var ariaHidden = component.get("v.ariaHidden");

        //return an svg element w/ the attributes
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute('class', classname);
        svg.setAttribute('aria-hidden', ariaHidden);

        // Add an "href" attribute (using the "xlink" namespace)
        var shape = document.createElementNS("http://www.w3.org/2000/svg", "use");
        shape.setAttributeNS("http://www.w3.org/1999/xlink", "href", xlinkHref);
        svg.appendChild(shape);
        return svg;
    }
})

Now, this helper Component injects <svg> into Lightning Component markup dynamically, and also injects <use> tag with path to svg icon. But it seems IE 11 does not support <use> tags.

Can anyone suggest how to rectify this issue?

I'm trying to call my custom SVG icon like this:

<c:svg class="slds-button__icon" xlinkHref="{!$Resource.custom_utility_icons + '/svg/media_logo.svg#logo1'}" />

Answer 1

It seems a known issue with IE 11 see similar issue and solutions here and here.