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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<apex:page sidebar="false" standardStylesheets="false" docType="html-5.0" id="sk" showHeader="false"> | |
<head> | |
<apex:slds /> | |
</head> | |
<body class="slds-scope"> | |
<div class="slds-grid slds-wrap" id="fileSelectionPopUpDiv"> | |
<div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-2 slds-col"> | |
<div class="slds-align_absolute-center"> | |
<table class="slds-table slds-table_bordered slds-table_cell-buffer"> | |
<thead> | |
<tr class="slds-text-title_caps"> | |
<th scope="col"> | |
<div class="slds-truncate" title="ICON NAME">ICON NAME</div> | |
</th> | |
<th scope="col"> | |
<div class="slds-truncate" title="CATEGORIES">CATEGORIES</div> | |
</th> | |
<th scope="col"> | |
<div class="slds-truncate" title="IMAGE">IMAGE</div> | |
</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Opportunity">Opportunity</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="STANDARD">STANDARD</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Opportunity"> | |
<span class="slds-icon_container slds-icon-standard-opportunity" > | |
<svg aria-hidden="true" class="slds-icon slds-icon--small"> | |
<use xmlns:xlink="http://www.w3.org/1999/xlink" | |
xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#opportunity"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">Opportunity</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ACCOUNT"> | |
<div class="slds-truncate" title="Account">Account</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="STANDARD">STANDARD</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Account"> | |
<span class="slds-icon_container slds-icon-standard-account" > | |
<svg aria-hidden="true" class="slds-icon slds-icon--medium"> | |
<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> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Add File">Add File</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="ACTION">ACTION</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Add File"> | |
<span class="slds-icon_container slds-icon-action-add-file slds-icon-text-default" > | |
<svg aria-hidden="true" class="slds-icon slds-icon--large"> | |
<use xmlns:xlink="http://www.w3.org/1999/xlink" | |
xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#add_file"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">add_file</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Download">Download</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="ACTION">ACTION</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Download"> | |
<span class="slds-icon_container slds-icon-action-download slds-icon-text-default" > | |
<svg aria-hidden="true" class="slds-icon slds-icon--x-small"> | |
<use xmlns:xlink="http://www.w3.org/1999/xlink" | |
xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#download"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">Download</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Custom 9">Custom 9</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="CUSTOM">CUSTOM</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Custom 9"> | |
<span class="slds-icon_container slds-icon-custom-custom9 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#custom9"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">Custom 9</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Custom 22">Custom 22</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="CUSTOM">CUSTOM</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Custom 22"> | |
<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> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Attachment">Attachment</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="DOCTYPE">DOCTYPE</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Attachment"> | |
<span class="slds-icon_container slds-icon-doctype-attachment 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/doctype-sprite/svg/symbols.svg#attachment"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">Attachment</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Audio">Audio</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="DOCTYPE">DOCTYPE</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Audio"> | |
<span class="slds-icon_container slds-icon-doctype-audio 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/doctype-sprite/svg/symbols.svg#audio"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">Audio</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Chart">Chart</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="UITILITY">UITILITY</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Chart"> | |
<span class="slds-icon_container slds-icon-utility-chart " > | |
<svg aria-hidden="true" class="slds-icon slds-icon-text-default"> | |
<use xmlns:xlink="http://www.w3.org/1999/xlink" | |
xlink:href="/apexpages/slds/latest//assets/icons/utility-sprite/svg/symbols.svg#chart"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">CHART</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
<tr> | |
<th scope="row" data-label="ICON NAME"> | |
<div class="slds-truncate" title="Add User">Add User</div> | |
</th> | |
<td data-label="CATEGORIES"> | |
<div class="slds-truncate" title="UITILITY">UITILITY</div> | |
</td> | |
<td data-label="IMAGE"> | |
<div class="slds-truncate" title="Add User"> | |
<span class="slds-icon_container slds-icon-utility-adduser " > | |
<svg aria-hidden="true" class="slds-icon slds-icon-text-default"> | |
<use xmlns:xlink="http://www.w3.org/1999/xlink" | |
xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#adduser"> | |
</use> | |
</svg> | |
<span class="slds-assistive-text">ADDUSER</span> | |
</span> | |
</div> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
</body> | |
</apex:page> |
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.