feat(material/stepper): add a styling token for header icon shape (#33963)

Author: sdedieu

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),

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,

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;