Use the Ignite UI for Angular Avatar to add images, material icons, or initials to an application, which is helpful for representing users in lists or profile buttons. The Avatar can be square or circular, with three size options. The control supports all images from the material icon set as well as custom images.

Avatar Demo


<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">


Name Type Description
src string Set the image source of the avatar.
initials string Set the initials of the avatar.
icon string Set the icon of the avatar. Currently all icons from the material icon set are supported. Not applicable for initials and image avatars.
bgColor string Set the background color of initials or icon avatars.
color string Set the color of initials or icon avatars. (optional)
roundShape boolean Set the shape of the avatar to circle. The default shape is square.
size string Set the size of the avatar to either small, medium, or large.
*You can also set all igx-avatar properties programmatically.


Using igx-avatar tag to include it in your app.

<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">

Using TypeScript to modify and existing igx-avatar instance.