SLDS icon not appearing in visualforce page

Script 1: Does not Work

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.slds221, 'assets/styles/salesforce-lightning-design-system.min.css')}"/>
    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.slds221, 'assets/icons/utility-sprite/svg/symbols.svg#email')}"></use>
    </svg>
</apex:page>

I can’t see any icon on my page.
However when I remove stylesheet reference it renders fine. What am I missing

Script 2: This Works (Removed slds-static reference)

<apex:page >
    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.slds221, 'assets/icons/utility-sprite/svg/symbols.svg#email')}"></use>
    </svg>
</apex:page>

Answer

  1. You don’t need to add lightning css as static resource. Just include this tag on top of your VF page: <apex:slds />.

  2. Pass the icon reference directly as shown below:

     /apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#opportunity
    

Example:

<use xmlns:xlink="http://www.w3.org/1999/xlink" 
    xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#opportunity">
</use>

Attribution
Source : Link , Question Author : pranav prashant , Answer Author : isherwood

Leave a Comment