SVG icon disappears after rerendering

What is the issue

After rerendering part of the Visualforce page, SVG icons used by SLDS will disappear. To demonstrate, below is a sample page:


<apex:page controller="Test_Donot_Package_Controller">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <apex:stylesheet value="{!URLFOR($Resource.Slds213, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
    <div class="sfdcinpractice">
        <apex:form id="testForm">
            <div class="slds-page-header">
                <div class="slds-grid">
                    <div class="slds-media slds-media--top slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <span id="icon" class="slds-icon_container slds-icon-custom-custom27">
                                <svg aria-hidden="true" class="slds-icon">
                                    <use xlink:href="{!URLFOR($Resource.Slds213, 'assets/icons/custom-sprite/svg/symbols.svg#custom27')}"></use>
                                </svg>
                                <span class="slds-assistive-text">Account Icon</span>
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Sample Page</p>
                            <div class="slds-grid">
                                <div class="slds-grid slds-type-focus slds-no-space">
                                    <h1 class="slds-text-heading--medium slds-truncate">Sample Title</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-col--padded slds-p-top--medium slds-p-left--medium">
                <apex:commandButton action="{!testButton}" styleClass="slds-button slds-button--brand" value="Click me" reRender="testForm"/>
            </div>
        </apex:form>
    </div>
    </html>
</apex:page>

Related controller:

public class Test_Donot_Package_Controller 
{
    public Test_Donot_Package_Controller() 
    {

    }

    public pageReference testButton()
    {
        return null;
    }
}


This code can pretty much be used in any org. Please note that after clicking the button. The SVG icon disappears.

This is a known issue of Salesforce.

The walkaround

Since this is a known issue of Salesforce, before its fix, there is no direct way of resolving it – until it is fixed. To walkaround this issue, we can add a oncomplete javascript method to resolve this. Something like below:

var j$ = jQuery.noConflict();
function renderSVG(){
    var imageURL = '{!URLFOR($Resource.SLDS213, 'assets/icons/standard-sprite/svg/symbols.svg#custom27')}';
    var SVG = j$('<svg/>', {
        class: 'slds-icon',
    });

    var SVGUse = j$('<use/>');
    SVGUse.attr('xlink:href',imageURL);
    j$('#Icon').prepend(SVG.append(SVGUse));
    j$('#Icon' ).html(j$('#Icon').html());
}

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *