fix(button): fix tokens usage on ionic theme (#30442)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Review button min-width and size of icons inside.
- Fixed test for ionic theme, with the correct medium size.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Button Ionic
theme](https://ionic-framework-git-rou-11968-button-v2-ionic1.vercel.app/src/components/button/test/theme-ionic)

---------

Co-authored-by: ionitron <[email protected]>

Author: BenOsodrac

core/src/components/button/button.ionic.scss

@@ -102,6 +102,7 @@
   --padding-end: #{globals.$ion-space-400};
 
   @include globals.typography(globals.$ion-body-action-sm);
+  min-width: globals.$ion-scale-1600;
 
   min-height: #{globals.$ion-scale-1000};
 }
@@ -111,6 +112,7 @@
   --padding-end: #{globals.$ion-space-500};
 
   @include globals.typography(globals.$ion-body-action-md);
+  min-width: globals.$ion-scale-1800;
 
   min-height: #{globals.$ion-scale-1200};
 }
@@ -120,6 +122,7 @@
   --padding-end: #{globals.$ion-space-700};
 
   @include globals.typography(globals.$ion-body-action-lg);
+  min-width: globals.$ion-scale-2000;
 
   min-height: #{globals.$ion-scale-1400};
 }
@@ -128,22 +131,28 @@
 // -------------------------------------------------------------------------------
 
 /* Button containing only an icon */
-::slotted(ion-icon[slot="start"]),
-::slotted(ion-icon[slot="end"]),
-::slotted(ion-icon[slot="icon-only"]) {
-  font-size: globals.$ion-font-size-500;
+:host(.button-small),
+:host(.button-medium) {
+  ::slotted(ion-icon[slot="start"]),
+  ::slotted(ion-icon[slot="end"]),
+  ::slotted(ion-icon[slot="icon-only"]) {
+    width: globals.$ion-scale-500;
+    height: globals.$ion-scale-500;
+  }
 }
 
 :host(.button-large) {
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
-    font-size: globals.$ion-font-size-600;
+    width: globals.$ion-scale-600;
+    height: globals.$ion-scale-600;
   }
 }
 
 :host(.button-has-icon-only) {
   --padding-end: var(--padding-top);
+  min-width: unset;
 
   aspect-ratio: 1 / 1;
 }
@@ -158,8 +167,8 @@
 ::slotted(ion-spinner[slot="start"]),
 ::slotted(ion-spinner[slot="end"]),
 ::slotted(ion-spinner[slot="icon-only"]) {
-  width: globals.$ion-space-500;
-  height: globals.$ion-space-500;
+  width: globals.$ion-scale-500;
+  height: globals.$ion-scale-500;
 }
 
 // Button Shapes

core/src/components/button/test/theme-ionic/index.html

@@ -34,8 +34,8 @@ <h4>Preview options</h4>
 
         <p>
           <ion-select id="select-size" justify="space-between" interface="alert" label="Size" placeholder="">
-            <ion-select-option selected="true" value="">default</ion-select-option>
             <ion-select-option value="small">Small</ion-select-option>
+            <ion-select-option selected="true" value="medium">Medium</ion-select-option>
             <ion-select-option value="large">Large</ion-select-option>
           </ion-select>