fix icon sizes inside badge

Author: OS-giulianasilva

core/api.txt

@@ -317,7 +317,7 @@ ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
-ion-badge,prop,size,"medium" | "small" | undefined,undefined,false,false
+ion-badge,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,prop,vertical,"bottom" | "top" | undefined,undefined,false,false
 ion-badge,css-prop,--background,ionic

core/src/components.d.ts

@@ -442,9 +442,9 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round | rectangular';
         /**
-          * Set to `"small"` for a small badge. Set to "medium" for a medium badge.  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'small' | 'medium';
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5899,9 +5899,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round | rectangular';
         /**
-          * Set to `"small"` for a small badge. Set to "medium" for a medium badge.  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'small' | 'medium';
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/badge/badge.ionic.scss

@@ -140,6 +140,16 @@
   transform: translate(-50%, -50%);
 }
 
+:host(.badge-small) ::slotted(ion-icon) {
+  width: globals.$ion-scale-300;
+  height: globals.$ion-scale-300;
+}
+
+:host(.badge-medium) ::slotted(ion-icon) {
+  width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+}
+
 // Badge in Button
 // --------------------------------------------------
 

core/src/components/badge/badge.tsx

@@ -47,11 +47,12 @@ export class Badge implements ComponentInterface {
 
   /**
    * Set to `"small"` for a small badge.
-   * Set to "medium" for a medium badge.
+   * Set to `"medium"` for a medium badge.
+   * Set to `"large"` for a large badge, when it is empty (no text or icon).
    *
    * Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: 'small' | 'medium';
+  @Prop() size?: 'small' | 'medium' | 'large';
 
   /**
    * Set to `"top"` to position the badge on top right absolute position of the parent element.