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!..

How to Use Rendered Attribute With Html Tags

Scenario:

Basically if you want to conditionally show/hide in any visual force element we will use the "rendered=true/false".Let assume if your using any html tags like <div> <span> in your visual force page and you want to hide/show conditionally we can not use the "rendered=true/false" property with these html tags.

Solution:

In these type of situations you can use some standard css styles to show or hide html content on conditionally.

<div style="{!IF(AND(condition1,condition2),'display:block','display:none')}">

//display:block - Shows the content,it's similar to rendered="true"

//dispaly:none - Hides the content,it's similar to rendered="false"

Sample Code:

<div class="slds-truncate sldswordWrap" style="{!IF(AND(condition1,condition2),'display:block','display:none')}">
      <span class="slds-icon_container slds-icon-standard-call">
        <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>

Hope this helped you..Enjoy!..