Skip to main content

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.

Preview of Visualforce page after adding icon to each contact

Resources

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

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities