fix: icon button mini size

Author: hperrin

packages/icon-button/_mixins.scss

@@ -1,10 +1,17 @@
 @use '@material/feature-targeting/index' as feature-targeting;
 @use '@material/icon-button/icon-button-theme';
 
+$mini-icon-height: 24px !default;
+$mini-height: 40px !default;
 $button-icon-height: 18px !default;
 $button-height: 36px !default;
 
 @mixin core-styles($query: feature-targeting.all()) {
+  .mdc-icon-button.smui-icon-button--size-mini {
+    @include icon-button-theme.icon-size($mini-icon-height);
+    @include icon-button-theme.size($mini-height);
+  }
+
   .mdc-icon-button.smui-icon-button--size-button {
     @include icon-button-theme.icon-size($button-icon-height);
     @include icon-button-theme.size($button-height);

packages/icon-button/src/IconButton.svelte

@@ -25,6 +25,7 @@
     'mdc-icon-button--touch': touch,
     'mdc-icon-button--display-flex': displayFlex,
     'smui-icon-button--size-button': size === 'button',
+    'smui-icon-button--size-mini': size === 'mini',
     'mdc-icon-button--reduced-size': size === 'mini' || size === 'button',
     'mdc-card__action': context === 'card:action',
     'mdc-card__action--icon': context === 'card:action',

packages/site/src/routes/demo/icon-button/_Simple.svelte

@@ -6,12 +6,12 @@
 <div style="display: flex; align-items: center;">
   <IconButton class="material-icons" on:click={() => clicked++} disabled
     >search</IconButton
-  > (disabled)
+  >&nbsp;(disabled)
 </div>
 <div style="display: flex; align-items: center;">
   <IconButton class="material-icons" on:click={() => clicked++} ripple={false}
     >add_shopping_cart</IconButton
-  > (no ripple)
+  >&nbsp;(no ripple)
 </div>
 
 <pre class="status">Clicked: {clicked}</pre>

packages/site/src/routes/demo/icon-button/_Sizes.svelte

@@ -3,21 +3,21 @@
     <Icon component={Svg} viewBox="0 0 24 24">
       <path fill="currentColor" d={mdiWrench} />
     </Icon>
-  </IconButton> (normal = standard icon button size)
+  </IconButton>&nbsp;(normal = standard icon button size)
 </div>
 <div style="display: flex; align-items: center;">
   <IconButton class="material-icons" on:click={() => clicked++} size="mini">
     <Icon component={Svg} viewBox="0 0 24 24">
       <path fill="currentColor" d={mdiWrench} />
     </Icon>
-  </IconButton> (mini = same size as mini FAB)
+  </IconButton>&nbsp;(mini = same size as mini FAB)
 </div>
 <div style="display: flex; align-items: center;">
   <IconButton class="material-icons" on:click={() => clicked++} size="button">
     <Icon component={Svg} viewBox="0 0 24 24">
       <path fill="currentColor" d={mdiWrench} />
     </Icon>
-  </IconButton> (button = same height as button)
+  </IconButton>&nbsp;(button = same height as button)
 </div>
 
 <pre class="status">Clicked: {clicked}</pre>

packages/site/src/routes/demo/icon-button/_Svgs.svelte

@@ -10,14 +10,14 @@
     <Icon component={Svg} viewBox="0 0 24 24">
       <path fill="currentColor" d={mdiWrench} />
     </Icon>
-  </IconButton> (disabled)
+  </IconButton>&nbsp;(disabled)
 </div>
 <div style="display: flex; align-items: center;">
   <IconButton on:click={() => clicked++} ripple={false}>
     <Icon component={Svg} viewBox="0 0 24 24">
       <path fill="currentColor" d={mdiCurrencyUsd} />
     </Icon>
-  </IconButton> (no ripple)
+  </IconButton>&nbsp;(no ripple)
 </div>
 
 <pre class="status">Clicked: {clicked}</pre>

packages/site/src/routes/demo/icon-button/_Toggle.svelte

@@ -10,6 +10,8 @@
     <Icon class="material-icons">alarm_off</Icon>
   </IconButton>
 
+  &nbsp;
+
   <!-- Note: this doesn't fire the MDCIconButtonToggle:change event. -->
   <Button on:click={() => (initialOn = !initialOn)}>
     <Label>Toggle Programmatically</Label>
@@ -24,8 +26,7 @@
   >
     <Icon class="material-icons" on>bookmark</Icon>
     <Icon class="material-icons">bookmark_border</Icon>
-  </IconButton>
-  <div>Using events instead of bound variables.</div>
+  </IconButton>&nbsp;Using events instead of bound variables.
 </div>
 
 <pre class="status">Clicked: {toggleClicked}</pre>