From 1fafde298d62f77ef66cd63d50663ef5150dc73d Mon Sep 17 00:00:00 2001 From: Joshua Van Deren Date: Tue, 11 Aug 2026 09:13:12 -0600 Subject: [PATCH 1/4] fix(material/button): compute M2 icon-button density padding with CSS calc --- src/material/button/_icon-button-theme.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 0115351874e8..65c2cdc3a427 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -1,5 +1,4 @@ @use 'sass:map'; -@use 'sass:math'; @use './m2-icon-button'; @use './m3-icon-button'; @use '../core/tokens/token-utils'; @@ -85,14 +84,9 @@ --mdc-icon-button-state-layer-size: #{$calculated-size}; --mat-icon-button-state-layer-size: #{$calculated-size}; - // TODO: Switch calculated-size to "var(--mat-icon-button-state-layer-size)" - // Currently fails validation because the variable is "undefined" - // in the sass stack. - // TODO: Switch icon-size to "var(--mat-icon-button-icon-size)". Currently - // fails validation because the variable is "undefined" in the sass stack. width: var(--mat-icon-button-state-layer-size); height: var(--mat-icon-button-state-layer-size); - padding: math.div($calculated-size - $icon-size, 2); + padding: calc(var(--mat-icon-button-state-layer-size, #{$calculated-size}) - var(--mat-icon-button-icon-size, #{$icon-size})) / 2; } } } From b0309f870842c76170bb9df881b2f9a6533154f0 Mon Sep 17 00:00:00 2001 From: Joshua Van Deren Date: Tue, 11 Aug 2026 09:53:08 -0600 Subject: [PATCH 2/4] fix(material/button): wrap icon-button density padding for stylelint Co-authored-by: Cursor --- src/material/button/_icon-button-theme.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 65c2cdc3a427..b296c2183004 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -86,7 +86,11 @@ width: var(--mat-icon-button-state-layer-size); height: var(--mat-icon-button-state-layer-size); - padding: calc(var(--mat-icon-button-state-layer-size, #{$calculated-size}) - var(--mat-icon-button-icon-size, #{$icon-size})) / 2; + padding: calc( + var(--mat-icon-button-state-layer-size, #{$calculated-size}) - + var(--mat-icon-button-icon-size, #{$icon-size}) + ) / + 2; } } } From 15d630913c2b1e3fbc0f77a5e5bd8df632156e29 Mon Sep 17 00:00:00 2001 From: Joshua Van Deren Date: Tue, 11 Aug 2026 12:22:51 -0600 Subject: [PATCH 3/4] fix(material/button): keep icon-button density padding division inside calc Co-authored-by: Cursor --- src/material/button/_icon-button-theme.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index b296c2183004..0e90cdb5b7f6 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -87,10 +87,12 @@ width: var(--mat-icon-button-state-layer-size); height: var(--mat-icon-button-state-layer-size); padding: calc( - var(--mat-icon-button-state-layer-size, #{$calculated-size}) - - var(--mat-icon-button-icon-size, #{$icon-size}) - ) / - 2; + ( + var(--mat-icon-button-state-layer-size, #{$calculated-size}) - + var(--mat-icon-button-icon-size, #{$icon-size}) + ) / + 2 + ); } } } From dd34eac4a312712e2322b0a6e227d4362152ba74 Mon Sep 17 00:00:00 2001 From: Joshua Van Deren Date: Tue, 11 Aug 2026 12:24:52 -0600 Subject: [PATCH 4/4] fix(material/button): tidy icon-button density padding calc formatting Co-authored-by: Cursor --- src/material/button/_icon-button-theme.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 0e90cdb5b7f6..fcce84a64c95 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -87,11 +87,8 @@ width: var(--mat-icon-button-state-layer-size); height: var(--mat-icon-button-state-layer-size); padding: calc( - ( - var(--mat-icon-button-state-layer-size, #{$calculated-size}) - - var(--mat-icon-button-icon-size, #{$icon-size}) - ) / - 2 + (var(--mat-icon-button-state-layer-size, #{$calculated-size}) - + var(--mat-icon-button-icon-size, #{$icon-size})) / 2 ); } }