Lightning Icons in Visualforce Page
Biswajeet
August 4, 2017 No Comments on Lightning Icons in Visualforce Page
Salesforce provides 5 different kind of Icons (Standart, Custom, Utility, Doctype, Action) which can be used in Lightning component and Visualforce page. Find SLDS Icons here.
Example:
Instead of uploading the Lightning Design System as a static resource, we can include apex:slds inside the head tag of Visualforce page to use Lightning Design System stylesheets in the page.
Visualforce Page:
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" >
<head>
<apex:slds/>
</head>
<body class="slds-scope">
<div class="slds-m-around--xx-large">
<article class="slds-card">
<div class="slds-card__body">
<table class="slds-table slds-table_bordered">
<thead>
<tr class="slds-text-heading--label">
<th scope="col">NAME</th>
<th scope="col">CATEGORIES</th>
<th scope="col">ICON</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Account</td>
<td scope="row">Standard</td>
<td scope="row">
<span class="slds-icon_container slds-icon-standard-account" >
<svg aria-hidden="true" class="slds-icon slds-icon--small">
<use xmlns:xlink="http://www.w3.org/2000/xlink"
xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#account">
</use>
</svg>
<span class="slds-assistive-text">Account</span>
</span>
</td>
</tr>
<tr>
<td scope="row">Custom1</td>
<td scope="row">Custom</td>
<td scope="row">
<span class="slds-icon_container slds-icon-custom-custom1" >
<svg aria-hidden="true" class="slds-icon slds-icon--small">
<use xmlns:xlink="http://www.w3.org/2000/xlink"
xlink:href="/apexpages/slds/latest/assets/icons/custom-sprite/svg/symbols.svg#custom1">
</use>
</svg>
<span class="slds-assistive-text">Custom1</span>
</span>
</td>
</tr>
<tr>
<td scope="row">Email</td>
<td scope="row">Utility</td>
<td scope="row">
<span class="slds-icon_container slds-icon-utility-email" >
<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#email">
</use>
</svg>
<span class="slds-assistive-text">Email</span>
</span>
</td>
</tr>
<tr>
<td scope="row">Priority</td>
<td scope="row">Action</td>
<td scope="row">
<span class="slds-icon_container slds-icon-action-priority" >
<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#priority">
</use>
</svg>
<span class="slds-assistive-text">Priority</span>
</span>
</td>
</tr>
<tr>
<td scope="row">CSV</td>
<td scope="row">Doctype</td>
<td scope="row">
<span class="slds-icon_container slds-icon-doctype-csv" >
<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#csv">
</use>
</svg>
<span class="slds-assistive-text">CSV</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</body>
</apex:page>
Output:
