Web Components Avatar

    The Ignite UI for Web Components Avatar helps to display initials, images, or icons in your application.

    Web Components Icon Avatar Example

    Usage

    First, you need to install the Ignite UI for Web Components npm package by running the following command:

    npm install igniteui-webcomponents
    
    import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcAvatarComponent);
    

    The IgcAvatarComponent is capable of displaying images, initials, or any other content, including icons. Declaring an IgcAvatarComponent is as simple as:

    <igc-avatar></igc-avatar>
    

    The avatar has several attributes that allow rendering different content based on the context. The most basic way to display content in the boundaries of the avatar is to provide content between the opening and closing tags.

    <igc-avatar>
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    

    Initials

    If the initials attribute is set all children elements of the avatar will be ignored and the string passed to this attribute will be displayed.

    <!-- Initials("AZ") will be displayed instead of the icon. -->
    
    <igc-avatar initials="AZ">
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    

    Image

    The avatar can also display an image when the src attribute is assigned a valid URL to a static asset. In that case the initials value will be ignored and children elements will not be rendered.

    <igc-avatar
      initials="AZ"
      src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
      alt="A photo of a man.">
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    

    The avatar supports three shapes - circle, rounded, and square. The shape of the avatar can be changed via the shape attribute.

    Shape

    Size

    Apart from the shape, the size of the avatar can also be changed by setting the size attribute. The supported sizes are small, medium, and large.

    Styling

    The avatar component exposes a base part that can be used to change all of its style properties.

    igc-avatar::part(base) {
      --size: 72px;
      color: olive;
      background: beige;
      border-radius: 20px;
    }
    

    API Reference

    Additional Resources

    API Members