$Asset

A global merge field to use when referencing images and other assets that are part of the Lightning Design System.

Usage

In a Visualforce page that uses <apex:slds>, $Asset.SLDS allows you to use the images, icons, and avatars that are part of the Lightning Design System. Use the URLFOR() formula function to reference assets using $Asset with dot notation.

To use SVG icons, add the required XML namespaces by using xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" in the html tag.

Currently, if you are using the Salesforce sidebar, header, or built-in stylesheets, you can’t add attributes to the html . VG icons are only supported ifshowHeader, standardStylesheets, and sidebar set to false.

Note

Example

The following markup references an avatar in the Lightning Design System.

1<apex:page>
2    <apex:slds />
3    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
4        <img src="{!URLFOR($Asset.SLDS, 'assets/images/profile_avatar_96.png')}" alt="Contact Avatar" />
5    </span>
6</apex:page>

The following markup references the Lightning Design System’s SVG account icon.

1<apex:page>
2    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
3        <apex:slds />
4        <span class="slds-icon_container slds-icon-standard-account">
5            <svg aria-hidden="true" class="slds-icon">
6                <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
7            </svg>
8             <span class="slds-assistive-text">Account Icon</span>
9        </span>
10    </html>
11</apex:page>

Visualforce Developer Guide

$Asset

Usage

Example

See Also