[SalesForce] SVG icons not displayed on Microsoft edge when created dynamically

I am dynamically creating icons based on icon name received in a VF page through javascript code.

My Javascript code is as:

function showDynamicIcon(docType){
    var svgLink = "{!URLFOR($Asset.SLDS, 'assets/icons/doctype-sprite/svg/symbols.svg#" + docType + "')}";
    var iconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    iconSvg.setAttribute('aria-hidden', 'true');
    iconSvg.setAttribute('class', 'slds-icon slds-icon--small');

    var useLink = document.createElement('use');
    useLink.setAttribute("xlink:href",svgLink);
    iconSvg.innerHTML = useLink.outerHTML;
    document.getElementById("svgIcon").appendChild(iconSvg);
}

Here docType is the string like "word", "pdf" that I am getting dynamically from another lightning component.

The VF HTML is:

<div id="fileDetailsDiv" class = "slds-hide slds-m-top--xxx-small">
    <span id="svgIcon" class="slds-p-right--xx-small"/>
    <span id="outTextId" value="" title=""/>
    <button class="slds-button slds-button slds-button--icon slds-pill__remove slds-button--icon-bare" type="button" onclick="showBrowseButton()">
        <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-
            sprite/svg/symbols.svg#close')}"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
    </button>
</div>

In above markup, the static button element and SVG icon within it is also not visible, though on click of the button, the respective action is executed. After inspecting element, all the markup is generated, but nothing is displayed on UI.

This issue happens only in MS Edge browser. Any idea how to get pass through it?

Best Answer

To use SVG spritemap image icons with Internet Explorer, use the svg4everybody script. I hope you have included it in your vf page.

SVG for Everybody adds SVG External Content support to all browsers.

To use it now, include the script in your document.

<script src="/path/to/svg4everybody.js"></script>
<script>svg4everybody(); // run it now or whenever you are ready</script>

To support Internet Explorer 6-8, include the legacy script instead.

<script src="/path/to/svg4everybody.legacy.js"></script>
<script>svg4everybody(); // run it now or whenever you are ready</script>

As of v2.0.0, you must manually call svg4everybody(). If you are using an AMD/CommonJS dependency loader then you may call it within the callback closure.

IE 6-8 require you to put the script in the in order to shiv and elements. For best results in IE, set X-UA-Compatible to ie=edge. This can be done with a response header from the server or the following HTML in the .

<meta http-equiv="x-ua-compatible" content="ie=edge">

References:

  1. https://www.lightningdesignsystem.com/platforms/visualforce/

  2. https://github.com/jonathantneal/svg4everybody

Related Topic