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

If you’re using the Salesforce sidebar, header, or built-in style sheets, you can’t add attributes to the html. VG icons are supported only if showHeader, standardStylesheets, and sidebar are 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