From 5a03b7100aa5053414bc7bd55f0cdc2bd4539622 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov 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.