Add an Icon
What You’ll Do
- Add an icon to the page header
Step 1: Add an Avatar
Replace the code between the <!-- HEADING AREA -->
comments with the following:
<!-- HEADING AREA -->
<!-- MEDIA OBJECT = FIGURE + BODY -->
<div class="slds-media slds-no-space slds-grow">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-contact">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-text-title_caps slds-line-height_reset">Contacts</p>
<h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Contacts">My Contacts</h1>
</div>
</div>
<!-- / MEDIA OBJECT -->
<!-- /HEADING AREA -->
Step 2: Preview
Save your page, and click the Preview button.
Resources
The Design System site has more documentation and examples.