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>',
        '<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>',
/* FUNCTION createTile */

Step 2: Preview

Save your page, and click the Preview button.

Preview of Visualforce page after adding icon to each contact


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

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • 1 in 4 land a new job
  • 50% receive a promotion or raise
  • 80% learn new technologies that boost their resume
  • 66% say it increases productivity
Source: Trailblazer Community Impact Survey 2019