Add Another Icon

What You’ll Do

Add a user icon next to each contact name in the tile

Step 1: Add an Icon to the Contact Tile

To do this we will replace the createTile function between the /* FUNCTION createTile */ comments with the following code:

/* FUNCTION createTile */
function createTile (record) {
  return [
    '<li class="slds-item">',
      '<div class="slds-tile slds-media">',
        '<div class="slds-media__figure">',
          '<svg aria-hidden="true" class="slds-icon slds-icon-standard-user">',
            '<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>',
          '</svg>',
        '</div>',
        '<div class="slds-media__body">',
          '<h3 class="slds-truncate" title="', record.get('Name'), '"><a href="javascript:void(0);">', record.get('Name') ,'</a></h3>',
          '<div class="slds-tile__detail slds-text-body_small">',
            '<p class="slds-truncate">', record.get('Title') ,'</p>',
          '</div>',
        '</div>',
      '</div>',
    '</li>'
  ].join('');
}
/* FUNCTION createTile */

Step 2: Preview

Save your page, and click the Preview button.

Resources

The Design System site has more documentation on the Icon component.

Icons