Wednesday, January 24, 2018

How to use Lightning Icons (svg icons) in Visualforce Page

Salesforce provide different kind of Icons which can be used in Lightning component. As now we have an option to include slds in Visualforce pages, we can utilize predefined Icons in Visualforce page.

For complete list of icons please refer Lightning Icons

Icons have been divided in 5 different categories (Standart,Utility,Custom,Doctype and Action). In this blog we are going to explore how to utilize these icons in VF page.

First of all, you have to include SLDS in VF page by using <apex:slds/> tag as shown below:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" >
<head>
  <apex:slds /> 
</head>

<body class="slds-scope">
<!--body content-->
</body>
</apex:page>

Now in order to refer any svg icon, use below code:

<span class="slds-icon_container slds-icon-custom-custom22 slds-icon-text-default" >
<svg aria-hidden="true" class="slds-icon ">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/apexpages/slds/latest/assets/icons/custom-sprite/svg/symbols.svg#custom22">
</use>
</svg>
<span class="slds-assistive-text">Custom 22</span>
</span>

Now i will explain all css class options:
  • Icon background color(.slds-icon_container)  : This is used to provide background color to icon. By default, (.slds-icon_container) has a transparent background. In order to provide backgroud similar to specified in icons in SLDS, use .slds-icon-[cateory name]-[icon name] class. 
For example, for account icon, I need to provide background, then use .slds-icon-standard-account class.

<span class="slds-icon_container slds-icon-standard-account" >
<svg aria-hidden="true" class="slds-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" 
xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#account">
</use>
</svg>
<span class="slds-assistive-text">Account</span>
</span>

  • Icon color(.slds-icon): By default, Icons color (.slds-icon) is white. Icon color can be changed by using below classes:
  1. .slds-icon-text-default: same as default text
  2. .slds-icon-text-warning: yellow
  3. .slds-icon-text-error: red
Note that doctype icons have specific colors that cannot be changed with the CSS property.
  • Icon size(.slds-icon): You can use below class to specify the icon size:
  1. Extra-small (.slds-icon--x-small): typically used for small alert icons, with no background color.
  2. Small (.slds-icon--small): 1.5rem×1.5rem (for icons with a background color).
  3. Medium (default - requires no additional class): 2rem×2rem.
  4. Large (.slds-icon--large): 3rem×3rem.
Below is sample VF page code which display different svg icons belonging to different categories.

VF Page snapshot:

Hope this will help!!

2 comments: