fix(avatar): slotted icon size (#1504)

Author: SisIvanova

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'] {

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');
     }
 }

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/[email protected]/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',