fix(icon, iconbutton): Cleanup styling

 - Remove duplicate md-ripple sizing in standard icon button
 - Tokens now have disabled outline color for outlined icon button, remove workaround
 - Use icon theming API
 - Also size `<img>` tags in `<md-icon>`

PiperOrigin-RevId: 500805749

Author: dfreedm

icon/lib/_icon.scss

@@ -45,9 +45,13 @@ $_custom-property-prefix: 'icon';
     -moz-osx-font-smoothing: grayscale;
   }
 
-  span ::slotted(svg) {
-    fill: currentColor;
-    height: var(--_size);
-    width: var(--_size);
+  span {
+    ::slotted(svg) {
+      fill: currentColor;
+    }
+    ::slotted(*) {
+      height: var(--_size);
+      width: var(--_size);
+    }
   }
 }

iconbutton/lib/_outlined-icon-button.scss

@@ -18,16 +18,10 @@
 $_custom-property-prefix: 'outlined-icon-button';
 
 @mixin theme($tokens) {
-  // TODO(b/233323674): Remove when missing tokens have been added.
-  $reference: map.merge(
+  $tokens: theme.validate-theme(
     tokens.md-comp-outlined-icon-button-values(),
-    (
-      disabled-selected-container-color:
-        map.get(tokens.md-sys-color-values-light(), on-surface),
-      disabled-selected-container-opacity: 0.12,
-    )
+    $tokens
   );
-  $tokens: theme.validate-theme($reference, $tokens);
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
   $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
@@ -37,15 +31,6 @@ $_custom-property-prefix: 'outlined-icon-button';
 
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-icon-button-values();
-  // TODO(b/233323674): Remove when missing tokens have been added.
-  $tokens: map.merge(
-    $tokens,
-    (
-      disabled-selected-container-color:
-        map.get(tokens.md-sys-color-values-light(), on-surface),
-      disabled-selected-container-opacity: 0.12,
-    )
-  );
   $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
   $tokens: shared.resolve-shape-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);

iconbutton/lib/_shared.scss

@@ -15,6 +15,7 @@
 @use '../../sass/shape';
 @use '../../sass/resolvers';
 @use '../../tokens';
+@use '../../icon/icon';
 
 @mixin styles() {
   :host {
@@ -35,7 +36,6 @@
     box-sizing: border-box;
     cursor: pointer;
     display: flex;
-    fill: currentColor;
     justify-content: center;
     outline: none;
     position: relative;
@@ -44,7 +44,6 @@
     z-index: 0;
     height: var(--_container-size);
     width: var(--_container-size);
-    font-size: var(--_icon-size);
     margin: max(
       0px,
       calc((#{$touch-target-height} - var(--_container-size)) / 2)
@@ -53,20 +52,15 @@
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
+  }
 
-    i,
-    svg,
-    img {
-      height: var(--_icon-size);
-      width: var(--_icon-size);
-    }
-
-    i,
-    svg,
-    img,
-    ::slotted(*) {
-      display: block;
-    }
+  .md3-icon-button__icon {
+    @include icon.theme(
+      (
+        size: var(--_icon-size),
+        weight: inherit,
+      )
+    );
   }
 
   md-ripple {

iconbutton/lib/_standard-icon-button.scss

@@ -67,6 +67,8 @@ $_custom-property-prefix: 'icon-button';
         pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
         pressed-state-layer-opacity:
           var(--_unselected-pressed-state-layer-opacity),
+        // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
+        state-layer-shape: var(--_state-layer-shape-start-start),
       )
     );
 
@@ -116,12 +118,4 @@ $_custom-property-prefix: 'icon-button';
       )
     );
   }
-
-  md-ripple {
-    // TODO(b/263517885): replace with ripple.theme(state-layer-shape)
-    border-start-start-radius: var(--_state-layer-shape-start-start);
-    border-start-end-radius: var(--_state-layer-shape-start-end);
-    border-end-start-radius: var(--_state-layer-shape-end-start);
-    border-end-end-radius: var(--_state-layer-shape-end-end);
-  }
 }