Lightning Avatar Tag In Lightning Experience

Aakanksha Singh

6 years ago

We all know that avatar icons are supported in lightning experience. And we also know that standard and custom icons are supported in lightning experince, and we can also use them through a tag. But, can we use avatar icons through code? The answer is yes, with the use of lightning avatar tag (lightning:avatar). Let’s know more about the tag.

Lightning Avatar Tag

Let’s get started with the required attribute of the tag:

1) alternativeText: Through this attribute you can add hover text.
2) fallbackIconName: You can write an icon name, if the image url is not correct this icon will be displayed. Only standard category icons are supported.
3) class: Adds extra css to the element.
4) title: Title of the icon appears when you hover mouse over it.
5) initials: It is the initial two words you want to display.
6) size: This describes the size of the element.

Here is the example:

<aura:application extends="force:slds">
	<!--
	/**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
	-->
    <lightning:avatar src="{!$Resource.SLDS+'/assets/images/avatar2.jpg'}" initials="Sa" fallbackIconName="standard:account" alternativeText="Salesforce"/>
    <lightning:avatar src="/badUrl/img.jpg" initials="Sa" fallbackIconName="standard:account" alternativeText="Salesforce"/>
    
</aura:application>

Output

Here is the output:

Support

That’s all about Lightning Avatar Tag in Lightning Experience, for any further queries feel free to contact us at:
https://wedgecommerce.com/contact-us/
Or let us know your views on how to make this code better, in comments section below.