diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx
deleted file mode 100644
index a362e26b4d..0000000000
--- a/docs/angular/src/content/en/components/avatar.mdx
+++ /dev/null
@@ -1,298 +0,0 @@
----
-title: Angular Avatar Component – Ignite UI for Angular | Infragistics | MIT license
-description: Ignite UI for Angular Avatar control enables users to add images, material icons or initials within any application for instances such as a profile button.
-keywords: Angular Avatar component, Angular Avatar control, Ignite UI for Angular, Angular UI components
-license: MIT
-llms:
- description: "Angular Avatar component helps adding initials, images, or material icons to your application."
----
-
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Avatar Component Overview
-
-
-Angular Avatar component helps adding initials, images, or material icons to your application.
-
-
-
-## Angular Avatar Example
-
-
-
-
-
-## 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:
-
-```cmd
-ng add igniteui-angular
-```
-
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
-
-The next step is to import the `IgxAvatarModule` in your **app.module.ts** file.
-
-```typescript
-// app.module.ts
-
-...
-import { IgxAvatarModule } from 'igniteui-angular/avatar';
-// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
-
-@NgModule({
- ...
- imports: [..., IgxAvatarModule],
- ...
-})
-export class AppModule {}
-```
-
-Alternatively, as of `16.0.0` you can import the `IgxAvatarComponent` as a standalone dependency.
-
-```typescript
-// home.component.ts
-
-...
-import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
-
-@Component({
- selector: 'app-home',
- template: '',
- styleUrls: ['home.component.scss'],
- standalone: true,
- imports: [IgxAvatarComponent]
-})
-export class HomeComponent {}
-```
-
-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 attribute setting its value to `square`, `rounded` or `circle`. By default, the shape of the avatar is `square`.
-
-```html
-
-```
-
-### Avatar displaying initials
-
-To get a simple avatar with (i.e. JS for 'Jack Sock'), add the following code inside the component template:
-
-```html
-
-```
-
-Let's enhance our avatar by making it circular and bigger in size.
-
-```html
-
-```
-
-We can also change the background using the `--ig-avatar-background` CSS variable or set a color on the initials through the `color` property.
-
-```scss
-// avatar.component.scss
-
-igx-avatar {
- --ig-avatar-background: #e41c77;
- color: #000000;
-}
-
-```
-
-
-The `roundShape` property of the `igx-avatar` component have been deprecated. The 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 property.
-
-```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 property. Currently all icons from the material icon set are supported.
-
-```html
-
-
-```
-
-
-This component uses Material Icons. Add the following link to your `index.html`: ``
-
-
-You should see something like this:
-
-
-
-## Styling
-
-### Avatar Theme Property Map
-
-Changing the `$background` property automatically updates the following dependent properties:
-
-| Primary Property | Dependent Property | Description |
-| --- | --- | --- |
-| **$background** | $color | The text color used for the avatar. |
-| | $icon-color | The icon color used for the avatar. |
-
-To get started with styling the avatar, we need to import the `index` file, where all the theme functions and component mixins live:
-
-```scss
-@use "igniteui-angular/theming" as *;
-
-// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
-// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
-
-Following the simplest approach, we create a new theme that extends the providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's is set to `rounded`.
-
-Given the following markup:
-
-```html
-
-
-
-
-```
-
-We create the following avatar theme:
-
-```scss
-$custom-avatar-theme: avatar-theme(
- $background: #72da67,
- $border-radius: 16px
-);
-```
-
-The last step is to pass the custom avatar theme:
-
-```scss
-.initials {
- @include tokens($custom-avatar-theme);
-}
-```
-
-If all went well, you should see something like the following in the browser:
-
-
-
-### Styling with Tailwind
-
-You can style the `avatar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
-
-Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
-
-```scss
-@import "tailwindcss";
-...
-@use 'igniteui-theming/tailwind/utilities/material.css';
-```
-
-The utility file includes both `light` and `dark` theme variants.
-
-- Use `light-*` classes for the light theme.
-- Use `dark-*` classes for the dark theme.
-- Append the component name after the prefix, e.g., `light-avatar`, `dark-avatar`.
-
-Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).
-
-You can find the full list of properties in the . The syntax is as follows:
-
-```html
-
-
-```
-
-
-The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
-
-
-At the end your avatar should look like this:
-
-
-
-### Custom sizing
-
-You can either use the `--size` variable, targeting the `igx-avatar` directly:
-
-```scss
-igx-avatar {
- --size: 200px;
-}
-```
-
-Or you can use the universal `--ig-avatar-size` variable to target all instances:
-
-```html
-
-
-
-
-```
-
-```scss
-.my-app {
- --ig-avatar-size: 200px;
-}
-```
-
-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`:
-
-```scss
-igx-avatar {
- --ig-size: var(--ig-size-small);
-}
-```
-
-Learn more about it in the [Size](/display-density) article.
-
-
-
-## API References
-
--
-## Theming Dependencies
-
--
--
-
-## Additional Resources
-
-
-
-Our community is active and always welcoming to new ideas.
-
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/en/components/layouts/avatar.mdx b/docs/angular/src/content/en/components/layouts/avatar.mdx
new file mode 100644
index 0000000000..e6e0bbbf52
--- /dev/null
+++ b/docs/angular/src/content/en/components/layouts/avatar.mdx
@@ -0,0 +1,239 @@
+---
+title: "Angular Avatar Component | Layouts | Infragistics"
+description: "Angular Avatar represents a user, entity, or object with an image, initials, or custom content."
+keywords: "Angular Avatar, avatar component, profile image, initials, Ignite UI for Angular, Infragistics"
+license: MIT
+mentionedTypes: ["Avatar", "Badge", "Icon"]
+relatedComponents: ["Badge"]
+llms:
+ description: "The Ignite UI for Angular Avatar represents a user, entity, or object with an image, initials, or custom content."
+---
+import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+import { Image } from 'astro:assets';
+import avatarAnatomy from '@xplat-images/anatomy-content-light/avatar-lt-a.png';
+import avatarDo from '@xplat-images/avatar/avatar_do1.png';
+import avatarDoNot from '@xplat-images/avatar/avatar_do_not1.png';
+
+# Avatar Component
+
+The Ignite UI for Angular Avatar represents a user, entity, or object with an image, initials, or custom content.
+
+Use the avatar to provide a compact visual identity in lists, cards, profile menus, and activity feeds.
+
+## Live Demo
+
+
+
+## Anatomy
+
+The avatar is a single host element that applies image semantics and renders one of the supported content patterns.
+
+
+
+```text
+igx-avatar[role="img"] // host - exposes the avatar
+└─ one of, by priority:
+ ├─ div.igx-avatar__image // `src` set - image painted as a background
+ ├─ igx-icon // `icon` set
+ ├─ span // `initials` set - first two characters
+ └─ ng-content // custom projected content
+```
+
+## Getting Started
+
+Import the Angular avatar component before you render ``. If you have not set up Ignite UI for Angular yet, complete the shared [Getting Started](../general/getting-started.mdx) topic first.
+
+```ts
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+```
+
+## Usage
+
+Render an avatar with an image source, initials, or custom content in the default slot.
+
+### Variants
+
+Set only the content source you intend to show. The Angular avatar renders `src` first, then `icon`, then `initials`, and falls back to projected custom content when none of those inputs are set.
+
+```html
+
+
+
+
+
+```
+
+
+
+
+
+
+
+### Shape
+
+Set to `square`, `rounded`, or `circle`.
+
+```html
+
+```
+
+
+
+### Size
+
+Set `--ig-size` to one of the shared size tokens when you need a preset avatar size.
+
+```html
+
+```
+
+
+
+### Do/Don't
+
+**When to use:** Use the avatar when a UI needs a small representation of a person, organization, object, or account, such as a profile image, initials, or an icon. Keep a consistent avatar strategy within the same UI region so repeated identities are easy to scan.
+
+**When not to use:** Use the [Badge](../badge.mdx) component when you need to show a count, status, or notification indicator instead of representing an entity. Badges can also decorate avatars when both identity and status need to appear together.
+
+
+
+
+
+
Do
+
Don't
+
+
+
+
+
+
+
+
+
+
+
+## Properties
+
+The avatar exposes a small set of inputs for its content and shape.
+
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+| | `string` | n/a | Sets the icon rendered by the avatar. |
+| | `string` | n/a | Sets text initials rendered by the avatar. |
+| | `"square" \| "rounded" \| "circle"` | `"square"` | Sets the avatar shape. |
+| | `"small" \| "medium" \| "large"` | `"small"` | Sets the avatar size. |
+| | `string` | n/a | Sets the image source URL. |
+
+## Styling
+
+
+
+The avatar appearance is controlled through theme variables and platform-specific styling hooks.
+
+Use the avatar CSS variables for token-level changes and Angular host classes when you need to target a specific rendered type or shape.
+
+| Variable | What it changes |
+| -- | -- |
+| `--ig-avatar-background` | Avatar background color. |
+| `--ig-avatar-color` | Text and initials color. |
+| `--ig-avatar-icon-color` | Icon color. |
+| `--ig-avatar-border-radius` | Border radius used by rounded avatars. |
+| `--ig-avatar-size` | Avatar width and height. |
+| `--ig-size` | Shared component size token used to derive preset avatar sizes. |
+
+| Selector | Description |
+| -- | -- |
+| `igx-avatar` | The avatar host element. |
+| `.igx-avatar--rounded` | Applied when `shape` is `rounded`. |
+| `.igx-avatar--circle` | Applied when `shape` is `circle`. |
+| `.igx-avatar--image` | Applied when the avatar renders an image. |
+| `.igx-avatar--icon` | Applied when the avatar renders an icon. |
+| `.igx-avatar--initials` | Applied when the avatar renders initials. |
+| `.igx-avatar__image` | The image avatar element. |
+
+### Sass Theming
+
+Use the function when your application customizes Ignite UI themes through Sass.
+
+```scss
+@use "igniteui-theming/sass/themes" as *;
+
+$custom-avatar-theme: avatar-theme(
+ $background: #72da67,
+ $border-radius: 16px,
+ $size: 3rem
+);
+
+:root {
+ @include tokens($custom-avatar-theme);
+}
+```
+
+### CSS Variables
+
+Set component CSS variables directly when you need local styling without a Sass build step.
+
+```css
+igx-avatar {
+ --ig-avatar-background: var(--ig-success-500);
+ --ig-avatar-color: var(--ig-success-500-contrast);
+ --ig-avatar-border-radius: 20px;
+}
+```
+
+
+
+### Tailwind
+
+Use the Angular Tailwind utility syntax when your application styles Ignite UI components through Tailwind classes.
+
+
+
+## Accessibility
+
+The avatar is a non-interactive identity visual with accessible image semantics.
+
+### Keyboard Interaction
+
+The avatar does not receive focus and has no keyboard interaction.
+
+| Key | Action |
+| -- | -- |
+| n/a | The avatar is not keyboard interactive. |
+
+### Screen Readers / ARIA
+
+The avatar initializes with image semantics and a default accessible label of `avatar`.
+
+- Use surrounding text to identify the represented person, entity, or object when an image avatar conveys identity.
+- Treat decorative avatars as redundant when adjacent text already identifies the same entity.
+
+### Accessibility Compliance
+
+Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic.
+
+| Criterion | How the component complies |
+| -- | -- |
+| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | The avatar has an accessible label and can be paired with surrounding text that identifies the represented entity. |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | The component initializes with `role="img"` and a default accessible label. |
+
+Your responsibilities:
+
+- Keep sufficient contrast between the avatar background and text or icon color when overriding styles.
+- Avoid duplicating the same identity announcement when adjacent text already names the person or entity.
+
+- Make sure nearby text identifies the represented entity when the avatar image conveys identity.
+
+## API References
+
+
+
+## Dependencies
+
+The Sass styling workflow uses the and APIs.
+
+## Additional Resources
+
+- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/en/components/list.mdx b/docs/angular/src/content/en/components/list.mdx
index c8d30218f8..9291575d95 100644
--- a/docs/angular/src/content/en/components/list.mdx
+++ b/docs/angular/src/content/en/components/list.mdx
@@ -17,7 +17,7 @@ The Ignite UI for Angular List component displays rows of items and supports one
## Angular List Example
-The following example represents a list populated with contacts with a _name_ and a _phone number_ properties. The component uses [`igx-avatar`](/avatar) and [`igx-icon`](/icon) to enrich the user experience and expose the capabilities of setting avatar picture and different icon for _favorite a contact_. In addition, the List View expose sorting capabilities achieved by using our filtering pipe.
+The following example represents a list populated with contacts with a _name_ and a _phone number_ properties. The component uses [`igx-avatar`](layouts/avatar.mdx) and [`igx-icon`](/icon) to enrich the user experience and expose the capabilities of setting avatar picture and different icon for _favorite a contact_. In addition, the List View expose sorting capabilities achieved by using our filtering pipe.
@@ -210,7 +210,7 @@ After all that our Angular list should now look like that:
### Adding Avatar and Icons
-We can use some of our other components in conjunction with the component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add a star icon to the right of them to allow the user to favorite a contact. To do that let's grab the [**IgxAvatar**](/avatar) and [**IgxIcon**](/icon) modules and import them in our app.module.ts file.
+We can use some of our other components in conjunction with the component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add a star icon to the right of them to allow the user to favorite a contact. To do that let's grab the [**IgxAvatar**](layouts/avatar.mdx) and [**IgxIcon**](/icon) modules and import them in our app.module.ts file.
```typescript
// app.module.ts
diff --git a/docs/angular/src/content/en/components/stepper.mdx b/docs/angular/src/content/en/components/stepper.mdx
index 55f11b5347..f68d0fa975 100644
--- a/docs/angular/src/content/en/components/stepper.mdx
+++ b/docs/angular/src/content/en/components/stepper.mdx
@@ -261,7 +261,7 @@ When the orientation is set to vertical layout the title position by default is
If you want to display only indicators for the steps, set the option to `indicator`.
-The step indicator supports any content, however with the restriction that its size would be always **24 pixels**. Having this in mind, we recommend using [IgxIconComponent](/icon) or [IgxAvatarComponent](/avatar) as step indicators.
+The step indicator supports any content, however with the restriction that its size would be always **24 pixels**. Having this in mind, we recommend using [IgxIconComponent](/icon) or [IgxAvatarComponent](layouts/avatar.mdx) as step indicators.
**Title**
diff --git a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
index 048e551909..d5f1885a78 100644
--- a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
+++ b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
@@ -414,7 +414,7 @@ Related topics:
- [Palettes](../sass/palettes.mdx)
- [Component Themes](../sass/component-themes.mdx)
- [Typography](../sass/typography.mdx)
-- [Avatar Component](../../avatar.mdx)
+- [Avatar Component](../../layouts/avatar.mdx)
- [Button Component](../../button.mdx)
- [Dialog Component](../../dialog.mdx)
- [Icon Component](../../icon.mdx)
diff --git a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
index 27282e7fd7..687791b0b3 100644
--- a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
+++ b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
@@ -367,7 +367,7 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w
- [Palettes](/themes/sass/palettes)
- [Component Themes](/themes/sass/component-themes)
- [Typography](/themes/sass/typography)
-- [Avatar Component](/avatar)
+- [Avatar Component](../../layouts/avatar.mdx)
- [Button Component](/button)
- [Dialog Component](/dialog)
- [Icon Component](/icon)
diff --git a/docs/angular/src/content/en/components/tooltip.mdx b/docs/angular/src/content/en/components/tooltip.mdx
index 51fdaea73c..5a2eb9de05 100644
--- a/docs/angular/src/content/en/components/tooltip.mdx
+++ b/docs/angular/src/content/en/components/tooltip.mdx
@@ -86,7 +86,7 @@ Now that you have the Ignite UI for Angular Tooltip module or directives importe
## Using the Angular Tooltip
-Let's say we want to create a simple text tooltip like the one above. In our case, we're using our awesome [`IgxAvatar`](/avatar) as the element, so we start by importing the `IgxAvatarModule` first.
+Let's say we want to create a simple text tooltip like the one above. In our case, we're using our awesome [`IgxAvatar`](layouts/avatar.mdx) as the element, so we start by importing the `IgxAvatarModule` first.
```typescript
// app.module.ts
@@ -162,7 +162,7 @@ If everything went well, you should see the sample shown in the [Tooltip Demo](#
The content can be more than just simple text. Since the tooltip itself is a regular element in the markup, you can enhance its content by adding any elements you need and styling them accordingly.
-Let's expand on the use of the and use it to provide more details for a specific location on a map! We'll use a simple div to represent our map, the [`IgxAvatar`](/avatar) for a logo in our tooltip and the [`IgxIcon`](/icon) for the location icon on our map. For this purpose, we will get their respective modules.
+Let's expand on the use of the and use it to provide more details for a specific location on a map! We'll use a simple div to represent our map, the [`IgxAvatar`](layouts/avatar.mdx) for a logo in our tooltip and the [`IgxIcon`](/icon) for the location icon on our map. For this purpose, we will get their respective modules.
```typescript
// app.module.ts
diff --git a/docs/angular/src/content/en/images/anatomy-content-light/avatar-lt-a.png b/docs/angular/src/content/en/images/anatomy-content-light/avatar-lt-a.png
new file mode 100644
index 0000000000..628c84a4d5
Binary files /dev/null and b/docs/angular/src/content/en/images/anatomy-content-light/avatar-lt-a.png differ
diff --git a/docs/angular/src/content/en/images/avatar/avatar_do1.png b/docs/angular/src/content/en/images/avatar/avatar_do1.png
new file mode 100644
index 0000000000..079a6fac58
Binary files /dev/null and b/docs/angular/src/content/en/images/avatar/avatar_do1.png differ
diff --git a/docs/angular/src/content/en/images/avatar/avatar_do_not1.png b/docs/angular/src/content/en/images/avatar/avatar_do_not1.png
new file mode 100644
index 0000000000..6d51576c23
Binary files /dev/null and b/docs/angular/src/content/en/images/avatar/avatar_do_not1.png differ
diff --git a/docs/xplat/src/assets/images/avatar/avatar_do1.png b/docs/xplat/src/assets/images/avatar/avatar_do1.png
new file mode 100644
index 0000000000..079a6fac58
Binary files /dev/null and b/docs/xplat/src/assets/images/avatar/avatar_do1.png differ
diff --git a/docs/xplat/src/assets/images/avatar/avatar_do_not1.png b/docs/xplat/src/assets/images/avatar/avatar_do_not1.png
new file mode 100644
index 0000000000..6d51576c23
Binary files /dev/null and b/docs/xplat/src/assets/images/avatar/avatar_do_not1.png differ
diff --git a/docs/xplat/src/content/en/components/layouts/avatar.mdx b/docs/xplat/src/content/en/components/layouts/avatar.mdx
index d1222f46b2..bfa848e1ca 100644
--- a/docs/xplat/src/content/en/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/en/components/layouts/avatar.mdx
@@ -1,109 +1,164 @@
---
-title: "{Platform} Avatar | Layout Controls | Infragistics"
-description: Use Infragistics' {Platform} avatar component to display an image, icon, or initials.
-keywords: avatar, layout, {ProductName}, Infragistics
+title: "{Platform} Avatar Component | Layouts | Infragistics"
+description: "Use the {Platform} Avatar component to represent users, entities, or objects with images, initials, icons, or custom content."
+keywords: "{Platform} Avatar, avatar component, profile image, initials, {ProductName}, Infragistics"
license: MIT
-mentionedTypes: ["Avatar"]
+mentionedTypes: ["Avatar", "Badge", "Icon"]
+relatedComponents: ["Badge"]
llms:
- description: "The {ProductName} Avatar helps to display initials, images, or icons in your application."
+ description: "The {ProductName} Avatar topic shows how to render user, entity, or object identity with images, initials, icons, custom content, shape, size, styling, and accessibility guidance."
---
import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+import { Image } from 'astro:assets';
+import avatarAnatomy from '@xplat-images/anatomy-content-light/avatar-lt-a.png';
+import avatarDo from '@xplat-images/avatar/avatar_do1.png';
+import avatarDoNot from '@xplat-images/avatar/avatar_do_not1.png';
+# Avatar Component
-# {Platform} Avatar
+The {ProductName} Avatar represents a user, entity, or object with an image, initials, or custom content.
-The {ProductName} Avatar helps to display initials, images, or icons in your application.
+Use the avatar to provide a compact visual identity in lists, cards, profile menus, and activity feeds.
-## {Platform} Icon Avatar Example
+## Live Demo
-
+
+
+
-## Usage
+
+
-
+
+## Anatomy
-First, you need to install the {ProductName} npm package by running the following command:
+The avatar is a single host element that applies image semantics and renders one of the supported content patterns.
-```cmd
-npm install {PackageWebComponents}
+
+
+
+
+```text
+igc-avatar[role="image"] // host - exposes the avatar
+└─ div[part="base"] // avatar wrapper
+ ├─ span[part="initials"] // rendered when `initials` is set
+ ├─ slot // rendered when `initials` is not set
+ └─ img[part="image"] // rendered while `src` is set and loads
```
+
+```text
+igx-avatar[role="img"] // host - exposes the avatar
+└─ one of, by priority:
+ ├─ div.igx-avatar__image // `src` set - image painted as a background
+ ├─ igx-icon // `icon` set
+ ├─ span // `initials` set - first two characters
+ └─ ng-content // custom projected content
+```
-
-
+
+## Getting Started
-First, you need to the install the corresponding {ProductName} npm package by running the following command:
+
-```cmd
-npm install igniteui-react
-```
+Register the avatar component before you use it. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general-getting-started.mdx) topic first.
-You will then need to import the and its necessary CSS, like so:
+```ts
+import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
-```tsx
-import { IgrAvatar } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
+defineComponents(IgcAvatarComponent);
```
-
+
+
+Import the Angular avatar component before you render ``. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general/getting-started.mdx) topic first.
-Before using the , you need to register it as follows:
+```ts
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+```
+
-
+
-```csharp
-// in Program.cs file
+Import the React wrapper and theme stylesheet before you render the avatar. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general-getting-started.mdx) topic first.
-builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
+```tsx
+import { IgrAvatar } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
+Register the avatar module in `Program.cs` and add the theme stylesheet to your host page. If you have not set up {ProductName} yet, complete the shared [Getting Started](../general-getting-started.mdx) topic first.
-
-You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project:
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
+```
```razor
```
+
+
+## Usage
+
+Render an avatar with an image source, initials, or custom content in the default slot.
+
+### Variants
+
+
+
+Set only the content source you intend to show. The avatar renders when they are set, otherwise it renders default slot content, and it also renders an image element while is set and loads successfully.
+
+
+Set only the content source you intend to show. The Angular avatar renders `src` first, then `icon`, then `initials`, and falls back to projected custom content when none of those inputs are set.
+
+
-```ts
-import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
+```html
+
-defineComponents(IgcAvatarComponent);
+
+
+
+
+
+
```
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
+
-The is capable of displaying images, initials, or any other content, including icons. Declaring an is as simple as:
+```html
+
-
+
-```html
-
+
```
@@ -111,7 +166,16 @@ The is capable of displaying images, initia
```tsx
-
+
+
+
+
+
+
+
```
@@ -119,19 +183,53 @@ The is capable of displaying images, initia
```razor
-
+
+
+
+
+
+
+
```
-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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Shape
+
+Set to `square`, `rounded`, or `circle`.
```html
-
-
-
+
+```
+
+
+
+
+
+```html
+
```
@@ -139,9 +237,7 @@ The avatar has several attributes that allow rendering different content based o
```tsx
-
-
-
+
```
@@ -149,156 +245,348 @@ The avatar has several attributes that allow rendering different content based o
```razor
-
-
-
+
```
-### Initials
+
-If the attribute is set all children elements of the avatar will be ignored and the string passed to this attribute will be displayed.
+
-
+
-```html
-
+
-
-
-
+
+
+
+
+### Size
+
+Set `--ig-size` to one of the shared size tokens when you need a preset avatar size.
+
+
+
+```css
+igc-avatar {
+ --ig-size: var(--ig-size-large);
+}
```
-
+
-```tsx
-
-
-
+```html
+
```
-
+
-```razor
-
+
-
-
-
-```
+
+
+
+
+
-
+### Do/Don't
+**When to use:** Use the avatar when a UI needs a small representation of a person, organization, object, or account, such as a profile image, initials, or an icon. Keep a consistent avatar strategy within the same UI region so repeated identities are easy to scan.
+
+**When not to use:** Use the [Badge](../inputs/badge.mdx) component when you need to show a count, status, or notification indicator instead of representing an entity. Badges can also decorate avatars when both identity and status need to appear together.
-### Image
+
-The avatar can also display an image when the attribute is assigned a valid URL to a static asset. In that case the value will be ignored and children elements will not be rendered.
+
-
+**When not to use:** Use the [Badge](../badge.mdx) component when you need to show a count, status, or notification indicator instead of representing an entity. Badges can also decorate avatars when both identity and status need to appear together.
-```html
-
-
-
-```
+
+
+
+
+
+
+
Do
+
Don't
+
+
+
+
+
+
+
+
+
+
+
+## Properties
+
+The avatar exposes a small set of inputs for its content and shape.
+
+
+
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+| | `string` | n/a | Sets alternative text for the image avatar. |
+| | `string` | n/a | Sets text initials rendered when no image is displayed. |
+| | `"square" \| "rounded" \| "circle"` | `"square"` | Sets the avatar shape. |
+| | `string` | n/a | Sets the image source URL. |
-
+
-```tsx
-
-
-
-```
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+| | `string` | n/a | Sets the icon rendered by the avatar. |
+| | `string` | n/a | Sets text initials rendered by the avatar. |
+| | `"square" \| "rounded" \| "circle"` | `"square"` | Sets the avatar shape. |
+| | `"small" \| "medium" \| "large"` | `"small"` | Sets the avatar size. |
+| | `string` | n/a | Sets the image source URL. |
+## Styling
-
+
-```razor
-
-
-
-```
+
-
+
+
+
-### Shape
+The avatar appearance is controlled through theme variables and platform-specific styling hooks.
-The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the attribute.
+
-
+Use the avatar CSS variables for token-level changes and CSS parts when you need to target the rendered wrapper, image, icon, or initials.
+| Variable | What it changes |
+| -- | -- |
+| `--ig-avatar-background` | Avatar background color. |
+| `--ig-avatar-color` | Text and initials color. |
+| `--ig-avatar-icon-color` | Slotted icon color. |
+| `--ig-avatar-border-radius` | Border radius used by rounded avatars. |
+| `--ig-avatar-size` | Avatar width and height. |
+| `--ig-size` | Shared component size token used to derive preset avatar sizes. |
+| CSS Part | Description |
+| -- | -- |
+| `base` | The avatar wrapper. |
+| `icon` | The icon wrapper. |
+| `initials` | The initials wrapper. |
+| `image` | The image element. |
+
-### Size
+
+
+Use the avatar CSS variables for token-level changes and Angular host classes when you need to target a specific rendered type or shape.
+
+| Variable | What it changes |
+| -- | -- |
+| `--ig-avatar-background` | Avatar background color. |
+| `--ig-avatar-color` | Text and initials color. |
+| `--ig-avatar-icon-color` | Icon color. |
+| `--ig-avatar-border-radius` | Border radius used by rounded avatars. |
+| `--ig-avatar-size` | Avatar width and height. |
+| `--ig-size` | Shared component size token used to derive preset avatar sizes. |
+
+| Selector | Description |
+| -- | -- |
+| `igx-avatar` | The avatar host element. |
+| `.igx-avatar--rounded` | Applied when `shape` is `rounded`. |
+| `.igx-avatar--circle` | Applied when `shape` is `circle`. |
+| `.igx-avatar--image` | Applied when the avatar renders an image. |
+| `.igx-avatar--icon` | Applied when the avatar renders an icon. |
+| `.igx-avatar--initials` | Applied when the avatar renders initials. |
+| `.igx-avatar__image` | The image avatar element. |
-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:
+
-```css
-igc-avatar {
- --ig-size: var(--ig-size-large);
-}
-```
+### Sass Theming
-
+Use the function when your application customizes Ignite UI themes through Sass.
+```scss
+@use "igniteui-theming/sass/themes" as *;
+$custom-avatar-theme: avatar-theme(
+ $background: #72da67,
+ $border-radius: 16px,
+ $size: 3rem
+);
+:root {
+ @include tokens($custom-avatar-theme);
+}
+```
-### Styling
+### CSS Variables
-The component exposes several CSS parts, giving you full control over its style:
+Set component CSS variables directly when you need local styling without a Sass build step.
-|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. |
+
```css
igc-avatar {
--ig-avatar-background: var(--ig-success-500);
+ --ig-avatar-color: var(--ig-success-500-contrast);
+ --ig-avatar-border-radius: 20px;
}
igc-avatar::part(base) {
- --size: 60px;
- color: var(--ig-success-500-contrast);
- border-radius: 20px;
+ border: 2px solid var(--ig-success-700);
}
```
-
+
+
+
+
+```css
+igx-avatar {
+ --ig-avatar-background: var(--ig-success-500);
+ --ig-avatar-color: var(--ig-success-500-contrast);
+ --ig-avatar-border-radius: 20px;
+}
+```
+
+
+
+
+
+
+
+### Tailwind
+
+Use the Angular Tailwind utility syntax when your application styles Ignite UI components through Tailwind classes.
+
+
+
+
+
+## Accessibility
+
+The avatar is a non-interactive identity visual with accessible image semantics.
+
+### Keyboard Interaction
+
+The avatar does not receive focus and has no keyboard interaction.
+
+| Key | Action |
+| -- | -- |
+| n/a | The avatar is not keyboard interactive. |
+
+### Screen Readers / ARIA
+
+The avatar initializes with image semantics and a default accessible label of `avatar`.
+
+
+
+- Set `alt` when a `src` image represents a specific person, entity, or object.
+- Add an explicit `aria-label` when projected custom content needs a different accessible name.
+- Treat decorative avatars as redundant when adjacent text already identifies the same entity.
+
+
+
+
+
+- Use surrounding text to identify the represented person, entity, or object when an image avatar conveys identity.
+- Treat decorative avatars as redundant when adjacent text already identifies the same entity.
+
+
+### Accessibility Compliance
+
+Infragistics documents {ProductName} accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic.
+
+
+
+| Criterion | How the component complies |
+| -- | -- |
+| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | The avatar has an accessible label, and image avatars can receive specific alternative text through `alt`. |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | The component initializes with image semantics and exposes content-related ARIA information. |
+
+
+
+| Criterion | How the component complies |
+| -- | -- |
+| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | The avatar has an accessible label and can be paired with surrounding text that identifies the represented entity. |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | The component initializes with `role="img"` and a default accessible label. |
+
+
+
+Your responsibilities:
+
+- Keep sufficient contrast between the avatar background and text or icon color when overriding styles.
+- Avoid duplicating the same identity announcement when adjacent text already names the person or entity.
+
+
+
+- Provide a descriptive label or `alt` text when the avatar conveys identity.
+
+
+
+
+
+- Make sure nearby text identifies the represented entity when the avatar image conveys identity.
+
+
## API References
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Dependencies
+
+
+
+Slotted icons require the component to be registered or imported.
+
+
+
+
+
+The avatar also uses the shared theme stylesheet for its default appearance.
+
+
+
+
+
+The Sass styling workflow uses the and APIs.
+
+
+
## Additional Resources
- [{ProductName} **Forums**]({ForumsLink})
diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json
index 17c916bd26..958c890fab 100644
--- a/docs/xplat/src/content/en/toc.json
+++ b/docs/xplat/src/content/en/toc.json
@@ -2223,9 +2223,7 @@
"href": "layouts/accordion.mdx"
},
{
- "exclude": [
- "Angular"
- ],
+ "exclude": [],
"name": "Avatar",
"href": "layouts/avatar.mdx"
},