$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.
Note

Note

Currently, if you are using the Salesforce sidebar, header, or built-in stylesheets, you can’t add attributes to the html tag. This means that SVG icons aren’t supported on your page if you don’t have showHeader, standardStylesheets, and sidebar set to false.

Example

The following markup references a JPG avatar in the Lightning Design System.
<apex:page>
    <apex:slds />
    <span class="slds-icon_container slds-icon--small slds-icon-standard-account" title="Contact Avatar">
        <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="Contact Avatar" />
    </span>
</apex:page>

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

<apex:page>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <apex:slds />
        <span class="slds-icon_container slds-icon-standard-account">
            <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">Account Icon</span>
        </span>
    </html>
</apex:page>

See Also