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:
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:
- .slds-icon-text-default: same as default text
- .slds-icon-text-warning: yellow
- .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:
- Extra-small (.slds-icon--x-small): typically used for small alert icons, with no background color.
- Small (.slds-icon--small): 1.5rem×1.5rem (for icons with a background color).
- Medium (default - requires no additional class): 2rem×2rem.
- 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!!
Thank you so much. This stuff is really amazing.
ReplyDeleteCheers!
This is the best content on the web, especially when it comes to visualforce pages, much of it outdated and not elaborative at all. This on the other hand helped me add my icons properly. Thank you very much for sharing the links for svg sprites on orgs.
ReplyDeleteThru that links I viewed whats available on my org and used accordingly.