[SalesForce] SVG Icon not rendering in IE11 from Lightning component in SF Classic view

I am trying to use the svg4Everybody js file, from trailhead link to github here, but it doesn't seem to be working properly. I am looking at both MS Edge, Chrome, and IE11. The issue is only apparent in IE11. This app was built with lightning components but our users will continue to use Salesforce Classic as they are not fond of change.

I searched for answers elsewhere and found that adding this bit of code to the controller where I'm loading the script worked for others but is not working for me.

({
   loadScripts : function(cmp, evt, hlp) {
    // add meta-http-equiv to the <head>
    $('head').append('<meta http-equiv="x-ua-compatible" content="ie=edge">');
    // start the svg4everybody helper
    $('body').append('<script>svg4everybody();</script>');
   }
})

With my component looking like this:

<aura:component implements="force:appHostable">
<ltng:require scripts="{!join(',',$Resource.JQuery224,
                                  $Resource.JQueryUI1pt11pt4 + '/jquery-ui-1.11.4/jquery-ui.min.js',
                                  $Resource.svg4Everybody)}"
              styles="{!$Resource.JQueryUIcss}" 
              afterScriptsLoaded="{!c.loadScripts}"/>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head title="headTitle">

</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds slds-theme--alert-texture">
    <!-- PRIMARY CONTENT WRAPPER -->
    <c:AthenaBody />
    <!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</aura:component>

I have confirmed the library is getting loaded. Any help is appreciated!

Best Answer

Make sure you are using absolute URL references for SVG graphics in your markup. For example, instead of this:

<use xlink:href="/resource/123456789/SLDS/assets/icons/utility-sprite/svg/symbols.svg#setup_assistant_guide"></use>

You need to add the domain prefix like this:

<use xlink:href="https://c.na31.visual.force.com/resource/123456789/SLDS/assets/icons/utility-sprite/svg/symbols.svg#setup_assistant_guide"></use>

If you were like me and using a variable to retrieve the base path for assets...

var sldsBase = "{!URLFOR($Resource.SLDS, '')}";

You can update it to... 

var sldsUrl = "{!SfInstance}{!URLFOR($Resource.SLDS, '')}";

And define SFInstance as follows...

public String getSfInstance() {
  return URL.getSalesforceBaseUrl().toExternalForm();
}
Related Topic