Returns the aria-label of the avatar.
let ariaLabel = this.avatar.ariaLabel;
Sets the background color of the avatar.
<igx-avatar bgColor="yellow"></igx-avatar>
Sets the avatar's initials/icon color.
<igx-avatar color="blue"></igx-avatar>
Returns the class of the avatar.
let avatarCLass = this.avatar.cssClass;
Sets an icon to the avatar. All icons from the material icon set are supported.
<igx-avatar icon="phone"></igx-avatar>
Sets the id of the avatar. If not set, the first avatar component will have id = "igx-avatar-0".
<igx-avatar id="my-first-avatar"></igx-avatar>
This is a reference to the avatar image element in the DOM.
let image = this.avatar.image;
Sets initials to the avatar.
<igx-avatar initials="MN"></igx-avatar>
Returns the role attribute of the avatar.
let avatarRole = this.avatar.role;
Returns the type of the avatar.
The avatar can be: "initials type avatar", "icon type avatar" or "image type avatar".
let avatarDescription = this.avatar.roleDescription;
Sets a round shape to the avatar if roundShape is "true".
By default the shape of the avatar is a square.
<igx-avatar roundShape = "true" ></igx-avatar>
Sets the image source of the avatar.
<igx-avatar src="images/picture.jpg"></igx-avatar>
Returns the template of the avatar.
let template = this.avatar.template;
Returns the type of the avatar.
let avatarType = this.avatar.type;
Returns the url of the image.
let imageSourceUrl = this.avatar.getSrcUrl();
Ignite UI for Angular Avatar - Documentation
The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an image, someone's initials or a material icon from the google material icon set.
Example:
<igx-avatar initials="MS" roundShape="true" size="large"> </igx-avatar>