Visualforce Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Use SLDS Icons in Visualforce
To use SVG spritemap icons in your Visualforce page, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"to the <html> tag.
<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
<svg aria-hidden="true" class="slds-icon">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
</svg>
<span class="slds-assistive-text">Icon Assistive Text</span>
</span>Since the icon is standalone and carries meaning, we placed it inside an outer span with the slds-icon_container class.
The icons have no background color out of the box. To set a background color, we apply a second class to the span. To use the default color for a particular icon, construct the name of the icon's specific utility class by concatenating slds-icon-, the sprite map name, and -icon. Apply that class to the <span> element. In the example we are using the "standard" sprite map and the “account” icon so the class is slds-icon-standard-account.
Inside the <span>, we have a <svg> element with the slds-icon class. The <svg> element in turn contains a <use> tag that specifies the icon to display based on its xlink:href attribute.
To set the xlink:href path:
- Select the icon you want to use from the icons page. Make a note of which category it’s in (action, custom, doctype, standard, or utility).
- Complete the xlink:href attribute by concatenating the category sprite (for example, “standard-sprite”), /svg/symbols.svg# and the specific icon within it (for example, “account”). This gives us the path assets/icons/standard-sprite/svg/symbols.svg#account.
After the <svg> tag, the assistive text is within a span with the slds-assistive-text class.