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

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class IconAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new IconAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Icon Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar>
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

Usage

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

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

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>
html

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>
html

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>
html

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class InitialsAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new InitialsAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Initials Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar initials="AZ">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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://es.infragistics.com/angular-demos/assets/images/men/1.jpg"
  alt="A photo of a man.">
  <igc-icon name="home"></igc-icon>
</igc-avatar>
html

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class ImageAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new ImageAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Image Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar
        initials="AZ"
        src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
        alt="A photo of a man.">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Shape

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

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class AvatarShape {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new AvatarShape();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Avatar Shape</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar shape="rounded">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Size

Apart from the shape, the size of the avatar can also be changed by utilizing the --ig-size CSS variable. The supported sizes are small (default), medium, and large. The following code snippet shows how to use a different component size:

igc-avatar {
  --ig-size: var(--ig-size-large);
}
css

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./AvatarSize.css";

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class AvatarSize {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new AvatarSize();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Avatar Size</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar class="size-large" initials="L"></igc-avatar>
      <igc-avatar class="size-medium" initials="M"></igc-avatar>
      <igc-avatar class="size-small" initials="S"></igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}

.sample {
    flex-direction: row;
    gap: 10px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

The IgcAvatarComponent component exposes several CSS parts, giving you full control over its style:

Name	Description
`base`	The base wrapper of the avatar.
`initials`	The initials wrapper of the avatar.
`image`	The image wrapper of the avatar.
`icon`	The icon wrapper of the avatar.

igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  background: var(--ig-success-500);;
  border-radius: 20px;
}
css