From 77bc2c41227aa17c999f612a1625567c57a64078 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
Date: Fri, 6 Dec 2024 11:01:18 +0200
Subject: [PATCH] fix(avatar): slotted icon size (#1504)

---
 .../avatar/themes/shared/avatar.common.scss   |  6 +++++
 .../avatar/themes/shared/avatar.indigo.scss   |  2 --
 stories/avatar.stories.ts                     | 23 +++++++++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/avatar/themes/shared/avatar.common.scss b/src/components/avatar/themes/shared/avatar.common.scss
index 5136c5332..f1fe9eb83 100644
--- a/src/components/avatar/themes/shared/avatar.common.scss
+++ b/src/components/avatar/themes/shared/avatar.common.scss
@@ -5,6 +5,12 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+
+    ::slotted(igc-icon) {
+        --ig-size: 3;
+
+        color: var-get($theme, 'icon-color');
+    }
 }
 
 [part='base'] {
diff --git a/src/components/avatar/themes/shared/avatar.indigo.scss b/src/components/avatar/themes/shared/avatar.indigo.scss
index de15bcb55..249de6458 100644
--- a/src/components/avatar/themes/shared/avatar.indigo.scss
+++ b/src/components/avatar/themes/shared/avatar.indigo.scss
@@ -8,7 +8,5 @@ $theme: $indigo;
 
     ::slotted(igc-icon) {
         --ig-size: 1;
-
-        color: var-get($theme, 'icon-color');
     }
 }
diff --git a/stories/avatar.stories.ts b/stories/avatar.stories.ts
index 25c8cba7b..b164e4d66 100644
--- a/stories/avatar.stories.ts
+++ b/stories/avatar.stories.ts
@@ -1,8 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { IgcAvatarComponent, defineComponents } from 'igniteui-webcomponents';
+import {
+  IgcAvatarComponent,
+  IgcIconComponent,
+  defineComponents,
+  registerIcon,
+} from 'igniteui-webcomponents';
+import { html } from 'lit';
 
-defineComponents(IgcAvatarComponent);
+defineComponents(IgcAvatarComponent, IgcIconComponent);
 
 // region default
 const metadata: Meta<IgcAvatarComponent> = {
@@ -57,6 +63,11 @@ interface IgcAvatarArgs {
 }
 type Story = StoryObj<IgcAvatarArgs>;
 
+registerIcon(
+  'home',
+  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg'
+);
+
 // endregion
 
 export const Image: Story = {
@@ -66,6 +77,14 @@ export const Image: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  render: () => html`
+    <igc-avatar>
+      <igc-icon name="home"></igc-icon>
+    </igc-avatar>
+  `,
+};
+
 export const WithInitials: Story = {
   args: {
     initials: 'RK',