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.
To support Internet Explorer 6-8, include the legacy script instead.
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 .
References:
https://www.lightningdesignsystem.com/platforms/visualforce/
https://github.com/jonathantneal/svg4everybody