From 5a03b7100aa5053414bc7bd55f0cdc2bd4539622 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 26 May 2025 14:52:50 +0200
Subject: [PATCH] fix(material/button): add token for icon button shape

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

Fixes #30525.
---
 src/material/button/_m2-icon-button.scss | 1 +
 src/material/button/_m3-icon-button.scss | 1 +
 src/material/button/icon-button.scss     | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/material/button/_m2-icon-button.scss b/src/material/button/_m2-icon-button.scss
index 08384398995f..19e9c43b76bc 100644
--- a/src/material/button/_m2-icon-button.scss
+++ b/src/material/button/_m2-icon-button.scss
@@ -9,6 +9,7 @@
 @function get-unthemable-tokens() {
   @return (
     icon-button-icon-size: 24px,
+    icon-button-container-shape: 50%,
   );
 }
 
diff --git a/src/material/button/_m3-icon-button.scss b/src/material/button/_m3-icon-button.scss
index 655f461f67ad..092e83d1b7a2 100644
--- a/src/material/button/_m3-icon-button.scss
+++ b/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:
diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
index 221d87aea749..e49934bb8680 100644
--- a/src/material/button/icon-button.scss
+++ b/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.