diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss index fb5df6095a74..4b361a06f021 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: 50%, ), 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;