From d9acf61ff00b42844fb1d31361b75111f284f794 Mon Sep 17 00:00:00 2001
From: Ivan Minchev <IMinchev@infragistics.com>
Date: Wed, 22 Jul 2026 17:23:48 +0300
Subject: [PATCH] feat(avatar): add shape and size samples

---
 live-editing/configs/AvatarConfigGenerator.ts        | 12 ++++++++++++
 .../avatar/avatar-shape/avatar-shape.component.html  |  5 +++++
 .../avatar/avatar-shape/avatar-shape.component.scss  | 12 ++++++++++++
 .../avatar/avatar-shape/avatar-shape.component.ts    | 11 +++++++++++
 .../avatar/avatar-size/avatar-size.component.html    |  5 +++++
 .../avatar/avatar-size/avatar-size.component.scss    | 12 ++++++++++++
 .../avatar/avatar-size/avatar-size.component.ts      | 11 +++++++++++
 src/app/layouts/layouts-routes-data.ts               |  2 ++
 src/app/layouts/layouts.routes.ts                    | 12 ++++++++++++
 9 files changed, 82 insertions(+)
 create mode 100644 src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
 create mode 100644 src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
 create mode 100644 src/app/layouts/avatar/avatar-shape/avatar-shape.component.ts
 create mode 100644 src/app/layouts/avatar/avatar-size/avatar-size.component.html
 create mode 100644 src/app/layouts/avatar/avatar-size/avatar-size.component.scss
 create mode 100644 src/app/layouts/avatar/avatar-size/avatar-size.component.ts

diff --git a/live-editing/configs/AvatarConfigGenerator.ts b/live-editing/configs/AvatarConfigGenerator.ts
index a1b020d8a..b19f1b541 100644
--- a/live-editing/configs/AvatarConfigGenerator.ts
+++ b/live-editing/configs/AvatarConfigGenerator.ts
@@ -26,6 +26,18 @@ export class AvatarConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/avatar/"
         }));
 
+        configs.push(new Config({
+            component: 'AvatarShapeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/avatar/"
+        }));
+
+        configs.push(new Config({
+            component: 'AvatarSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/layouts/avatar/"
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
new file mode 100644
index 000000000..0e7a377b6
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
@@ -0,0 +1,5 @@
+<article class="avatar-sample">
+    <igx-avatar initials="AZ" shape="square"></igx-avatar>
+    <igx-avatar initials="AZ" shape="rounded"></igx-avatar>
+    <igx-avatar initials="AZ" shape="circle"></igx-avatar>
+</article>
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
new file mode 100644
index 000000000..28cb38de0
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
@@ -0,0 +1,12 @@
+.avatar-sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    padding: 16px;
+}
+
+igx-avatar {
+    --ig-avatar-background: #e41c77;
+    --ig-avatar-color: #fff;
+}
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.ts b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.ts
new file mode 100644
index 000000000..20d5ce5f9
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.ts
@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+
+@Component({
+    selector: 'app-avatar-shape',
+    styleUrls: ['./avatar-shape.component.scss'],
+    templateUrl: './avatar-shape.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxAvatarComponent]
+})
+export class AvatarShapeComponent { }
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.html b/src/app/layouts/avatar/avatar-size/avatar-size.component.html
new file mode 100644
index 000000000..6c5d4618b
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.html
@@ -0,0 +1,5 @@
+<article class="avatar-sample">
+    <igx-avatar initials="AZ" size="small"></igx-avatar>
+    <igx-avatar initials="AZ" size="medium"></igx-avatar>
+    <igx-avatar initials="AZ" size="large"></igx-avatar>
+</article>
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
new file mode 100644
index 000000000..28cb38de0
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
@@ -0,0 +1,12 @@
+.avatar-sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    padding: 16px;
+}
+
+igx-avatar {
+    --ig-avatar-background: #e41c77;
+    --ig-avatar-color: #fff;
+}
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.ts b/src/app/layouts/avatar/avatar-size/avatar-size.component.ts
new file mode 100644
index 000000000..fc442000d
--- /dev/null
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.ts
@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+
+@Component({
+    selector: 'app-avatar-size',
+    styleUrls: ['./avatar-size.component.scss'],
+    templateUrl: './avatar-size.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxAvatarComponent]
+})
+export class AvatarSizeComponent { }
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index 984fe9348..927bd29f0 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -9,6 +9,8 @@ export const layoutsRoutesData = {
     'avatar-sample-2': { displayName: 'Avatar with Image', parentName: 'Avatar' },
     'avatar-sample-4': { displayName: 'Avatar with Icon', parentName: 'Avatar' },
     'avatar-sample-3': { displayName: 'Multiple avatars', parentName: 'Avatar' },
+    'avatar-shape': { displayName: 'Avatar Shape', parentName: 'Avatar' },
+    'avatar-size': { displayName: 'Avatar Size', parentName: 'Avatar' },
     'avatar-styling': { displayName: 'Styling avatars', parentName: 'Avatar' },
     'avatar-tailwind-styling': { displayName: 'Styling Avatar with Tailwind', parentName: 'Avatar' },
     'avatar-css-variables': { displayName: 'Avatar with CSS variables', parentName: 'Avatar' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index a8f23171c..446b16d13 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -4,6 +4,8 @@ import { AvatarSample1Component } from './avatar/avatar-sample-1/avatar-sample-1
 import { AvatarSample2Component } from './avatar/avatar-sample-2/avatar-sample-2.component';
 import { AvatarSample3Component } from './avatar/avatar-sample-3/avatar-sample-3.component';
 import { AvatarSample4Component } from './avatar/avatar-sample-4/avatar-sample-4.component';
+import { AvatarShapeComponent } from './avatar/avatar-shape/avatar-shape.component';
+import { AvatarSizeComponent } from './avatar/avatar-size/avatar-size.component';
 import { AvatarStylingSampleComponent } from './avatar/avatar-styling/avatar-styling.component';
 import { AvatarTailwindStylingSampleComponent } from './avatar/avatar-tailwind-styling/avatar-tailwind-styling.component';
 import { AvatarCSSVariablesComponent } from './avatar/avatar-css-variables/avatar-css-variables.component';
@@ -132,6 +134,16 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['avatar-sample-4'],
         path: 'avatar-sample-4'
     },
+    {
+        component: AvatarShapeComponent,
+        data: layoutsRoutesData['avatar-shape'],
+        path: 'avatar-shape'
+    },
+    {
+        component: AvatarSizeComponent,
+        data: layoutsRoutesData['avatar-size'],
+        path: 'avatar-size'
+    },
     {
         component: AvatarStylingSampleComponent,
         data: layoutsRoutesData['avatar-styling'],