From bca5c3bb5248b6a9f243ef2d6f5e343944ff6e62 Mon Sep 17 00:00:00 2001 From: "s.dedieu" Date: Thu, 15 Oct 2026 11:34:46 +0200 Subject: [PATCH] feat(material/stepper): add a styling token for header icon shape --- src/material/stepper/_m2-stepper.scss | 1 + src/material/stepper/_m3-stepper.scss | 1 + src/material/stepper/step-header.scss | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss index fb5df6095a74..da420b823a30 100644 --- a/src/material/stepper/_m2-stepper.scss +++ b/src/material/stepper/_m2-stepper.scss @@ -11,6 +11,7 @@ base: ( stepper-header-focus-state-layer-shape: 4px, stepper-header-hover-state-layer-shape: 4px, + stepper-header-icon-shape: 9999px, ), color: map.merge(private-get-color-palette-color-tokens($theme, primary), ( stepper-container-color: map.get($system, surface), diff --git a/src/material/stepper/_m3-stepper.scss b/src/material/stepper/_m3-stepper.scss index 6c3b5433a290..827b52600f43 100644 --- a/src/material/stepper/_m3-stepper.scss +++ b/src/material/stepper/_m3-stepper.scss @@ -19,6 +19,7 @@ $prefix: (mat, stepper); base: ( stepper-header-focus-state-layer-shape: map.get($system, corner-medium), stepper-header-hover-state-layer-shape: map.get($system, corner-medium), + stepper-header-icon-shape: map.get($system, corner-full), ), color: ( stepper-header-error-state-icon-background-color: transparent, diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss index 2dad0d3a6d7b..7f932f56ed75 100644 --- a/src/material/stepper/step-header.scss +++ b/src/material/stepper/step-header.scss @@ -87,7 +87,7 @@ $fallbacks: m3-stepper.get-tokens(); } .mat-step-icon { - border-radius: 50%; + border-radius: token-utils.slot(stepper-header-icon-shape, $fallbacks); height: stepper-variables.$label-header-height; width: stepper-variables.$label-header-height; flex-shrink: 0;