Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

$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