Thursday, August 8, 2019

How to Use SLDS Icons/SVGs in Visual Force Pages

To use Icons/Svgs in visual force pages below 2 steps is required

  • Include latest slds styles   <apex:slds />
  • apply use property in svg tag with required icon
       <use xmlns:xlink="http://www.w3.org/1999/xlink" 
           xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#call" />
                

<apex:page standardController="Case" docType="html-5.0" id="pageId" showHeader="false" showChat="false" sidebar="false" lightningStylesheets="true">
    <apex:slds />
    <apex:form id="formId" >
        <div class="slds-truncate sldswordWrap" >
            <span class="slds-icon_container slds-icon-standard-call" title="Dial To Bo">
                <svg class="slds-icon" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#call" />
                </svg>
                <span class="slds-assistive-text">Description of icon when needed</span>
            </span>
        </div>
    </apex:form>
</apex:page>

Output:



Hope this helped you..Enjoy!..