Avatar

The Ignite UI for Angular Avatar component helps adding images, material icons, or initials to your application.

Avatar Demo

Usage

To get started with the Ignite UI for Angular Avatar, let's first import the IgxAvatarModule in the app.module.ts file:

// app.module.ts

...
import { IgxAvatarModule } from 'igniteui-angular/main';

@NgModule({
    ...
    imports: [..., IgxAvatarModule],
    ...
})
export class AppModule {}

The Avatar can be either square or circular, with three size options (small, medium and large). It can be used for displaying initials, images or icons.

Avatar displaying initials

To get a simple avatar with initials (i.e. JS for 'Jack Sock'), add the following code inside the component template:

<igx-avatar initials="JS">
</igx-avatar>

Let's enhance our avatar by making it circular and bigger in size. We can also change the background through the bgColor property or set a color on the initials through the color property. All of these are input properties and can be bound to some component properties.

<igx-avatar initials="JS" 
            [roundShape]="isCircular" 
            size="medium" 
            [bgColor]="bgColor" 
            [color]="color">
</igx-avatar>
// avatar.component.ts
...
  public bgColor = "#0375be";
  public color = "black";
  public isCircular = true;

If all went well, you should see something like the following in the browser:

Avatar displaying image

To get an avatar that dispalays an image, all you have to do is setting the image source via the src property.

<igx-avatar [src]="imgSource"
            roundShape="true"
            size="large">
</igx-avatar>
// avatar.component.ts
...
  public imgSource = "https://randomuser.me/api/portraits/men/1.jpg";

If all went well, you should see something like the following in the browser:

Avatar displaying icon

Analogically the avatar can display an icon via the icon property. Currently all icons from the material icon set are supported.

<igx-avatar icon="phone"
            roundShape="true"
            size="large">
</igx-avatar>

API

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.