Angular Avatar Component Overview

    Angular Avatar component helps adding initials, images, or material icons to your application.

    Angular Avatar Example

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Avatar

    To get started with the Ignite UI for Angular Avatar component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular
    cmd

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxAvatarModule in your app.module.ts file.

    // app.module.ts
    
    ...
    import { IgxAvatarModule } from 'igniteui-angular';
    // import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxAvatarModule],
        ...
    })
    export class AppModule {}
    typescript

    Alternatively, as of 16.0.0 you can import the IgxAvatarComponent as a standalone dependency.

    // home.component.ts
    
    ...
    import { IgxAvatarComponent } from 'igniteui-angular';
    // import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: '<igx-avatar shape="circle"></igx-avatar>',
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IgxAvatarComponent]
    })
    export class HomeComponent {}
    typescript

    Now that you have the Ignite UI for Angular Avatar module or component imported, you can start with a basic configuration of the igx-avatar component.

    Using the Angular Avatar Component

    The Ignite UI for Angular Avatar component comes in three shapes (square, rounded, and circle) and three size options (small, medium, and large). It can be used for displaying initials, images or icons.

    Avatar Shape

    We can change the avatar shape through the shape attribute setting its value to square, rounded or circle. By default, the shape of the avatar is square.

    <igx-avatar shape="circle"></igx-avatar>
    html

    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" shape="circle"></igx-avatar>
    html

    Let's enhance our avatar by making it circular and bigger in size.

    <igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
    html

    We can also change the background through the background property or set a color on the initials through the color property.

    // avatar.component.scss
    
    igx-avatar {
      background: #e41c77;
      color: #000000;
    }
    
    scss

    The roundShape property of the igx-avatar component have been deprecated. The shape attribute should be used instead.

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

    Avatar displaying image

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

    <igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
                shape="rounded"
                size="large">
    </igx-avatar>
    html

    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="person"
                shape="rounded"
                size="small">
    </igx-avatar>
    html

    You should see something like this:

    Styling

    To get started with styling the avatar, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    Following the simplest approach, we create a new theme that extends the avatar-theme and accepts the $background, $color, and the $border-radius parameters.

    Given the following markup:

    <div class="avatar-sample initials">
      <igx-avatar initials="JS" size="medium"></igx-avatar>
    </div>
    html

    We create the following avatar theme:

    $custom-avatar-theme: avatar-theme(
      $background: #72da67,
      $color: #000000,
      $border-radius: 16px
    );
    scss

    The last step is to pass the custom avatar theme:

    .initials {
      @include css-vars($custom-avatar-theme);
    }
    scss

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

    EXAMPLE

    Custom sizing

    You can either use the --size variable, targeting the igx-avatar directly:

    igx-avatar {
      --size: 200px;
    }
    scss

    Or you can use the universal --igx-avatar-size variable to target all instances:

    <div class="my-app">
      <igx-avatar></igx-avatar>
    </div>
    html
    .my-app {
      --igx-avatar-size: 200px;
    }
    scss

    You can also use one of the predefined sizes, assigning it to the --ig-size variable, if theres no size attribute applied. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large:

    igx-avatar {
      --ig-size: var(--ig-size-small);
    }
    scss

    Learn more about it in the Size article.

    App Builder | CTA Banner

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.