feat(avatar): use correct styles for icons in ionic theme (#29581)

Issue number: internal

---------

## What is the current behavior?
Avatar icon styles use `1em` width/height which makes them change size
based on the `font-size`

## What is the new behavior?
Updates the `ionic` theme only to:
- Set the `width` / `height` of icons in `ion-avatar` to use the scale
tokens based on the Figma design
- Removes the padding for avatars containing an icon
- Updates the existing screenshots to show the new icon sizes

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

## Other information

[Preview](https://ionic-framework-git-rou-10732-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)

Author: brandyscarney

core/src/components/avatar/avatar.ionic.scss

@@ -103,3 +103,35 @@
 :host(.avatar-rectangular) {
   --border-radius: #{globals.$ionic-border-radius-0};
 }
+
+// Avatar Icon
+// --------------------------------------------------
+
+:host(.avatar-icon) {
+  @include padding(0);
+}
+
+:host(.avatar-xsmall) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+}
+
+:host(.avatar-small) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-500;
+  height: globals.$ionic-scale-500;
+}
+
+:host(.avatar-medium) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+}
+
+:host(.avatar-large) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-800;
+  height: globals.$ionic-scale-800;
+}
+
+:host(.avatar-xlarge) ::slotted(ion-icon) {
+  width: globals.$ionic-scale-1000;
+  height: globals.$ionic-scale-1000;
+}

core/src/components/avatar/avatar.tsx

@@ -41,6 +41,10 @@ export class Avatar implements ComponentInterface {
     return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
   }
 
+  get hasIcon() {
+    return !!this.el.querySelector('ion-icon');
+  }
+
   private getSize(): string | undefined {
     const theme = getIonTheme(this);
     const { size } = this;
@@ -85,6 +89,7 @@ export class Avatar implements ComponentInterface {
           [`avatar-${size}`]: size !== undefined,
           [`avatar-${shape}`]: shape !== undefined,
           [`avatar-image`]: this.hasImage,
+          [`avatar-icon`]: this.hasIcon,
         }}
       >
         <slot></slot>