fix(material/button): add token for icon button shape (#31223)

Fixes that it wasn't possible to customize the shape of the icon button using tokens.

Fixes #30525.

(cherry picked from commit c10b5fe)

Author: crisbeto

src/material/button/_m2-icon-button.scss

@@ -10,6 +10,7 @@
 @function get-unthemable-tokens() {
   @return (
     icon-button-icon-size: 24px,
+    icon-button-container-shape: 50%,
   );
 }
 

src/material/button/_m3-icon-button.scss

@@ -20,6 +20,7 @@
   $tokens: (
     base: (
       icon-button-icon-size: 24px,
+      icon-button-container-shape: map.get($system, corner-full),
     ),
     color: (
       icon-button-disabled-icon-color:

src/material/button/icon-button.scss

@@ -21,7 +21,7 @@ $fallbacks: m3-icon-button.get-tokens();
   overflow: visible;
 
   // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
-  border-radius: 50%;
+  border-radius: token-utils.slot(icon-button-container-shape, $fallbacks, $fallback: 50%);
 
   // Prevent the button from shrinking since it's always supposed to be a circle.
   flex-shrink: 0;
@@ -69,7 +69,7 @@ $fallbacks: m3-icon-button.get-tokens();
   }
 
   .mat-mdc-button-persistent-ripple {
-    border-radius: 50%;
+    border-radius: token-utils.slot(icon-button-container-shape, $fallbacks, $fallback: 50%);
   }
 
   // MDC used to include this and it seems like a lot of apps depend on it.