How to change color of angular material stepper step icons

phelhe

In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.

Nenad Radak

There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.

 ::ng-deep .mat-step-header .mat-step-icon-selected {
    background-color: red; 
 }

::ng-deep is deprecated and can be removed, also can be used

ViewEncapsulation.None in component decorator to avoid using ::ng-deep

Update with solution to problem

html file example

 <div class="yellow-theme"> <----- wrapper theme class
     <button mat-raised-button (click)="isLinear = !isLinear" id="toggle- 
      linear">
            {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
          </button>
          <mat-horizontal-stepper [linear]="isLinear" #stepper>
            <mat-step [stepControl]="firstFormGroup">
              <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>Fill out your name</ng-template>
                <mat-form-field>
                  <input matInput placeholder="Last name, First name" 
                  formControlName="firstCtrl" required>
                </mat-form-field>
                <div>
                  <button mat-button matStepperNext>Next</button>
                </div>
              </form>
            </mat-step>
            <mat-step [stepControl]="secondFormGroup">
              <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>Fill out your address</ng-template>
                <mat-form-field>
                  <input matInput placeholder="Address" formControlName="secondCtrl" required>
                </mat-form-field>
                <div>
                  <button mat-button matStepperPrevious>Back</button>
                  <button mat-button matStepperNext>Next</button>
                </div>
              </form>
            </mat-step>
            <mat-step>
              <ng-template matStepLabel>Done</ng-template>
              You are now done.
              <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button (click)="stepper.reset()">Reset</button>
              </div>
            </mat-step>
          </mat-horizontal-stepper>

create theme.scss file and add it to styles in angular.json

 "styles": [
          "src/styles.css",
          "src/theme.scss"
           ]

note stepper will take color of primary color

theme.scss

 @import '~@angular/material/theming';
 @include mat-core();

 .yellow-theme {
     $yellow-theme-primary: mat-palette($mat-yellow, 400);
     $yellow-theme-accent:  mat-palette($mat-yellow, 400);

     $yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

     @include angular-material-theme($yellow-theme);
 }

Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class. Component that is wrapped in custom class wil use that color, if not color are set from global theme.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to change angular material stepper step numbers to any icon or text?

how to change angular stepper progress color when next step active

How to change the angular material mat stepper label color?

How to change stepper icons foreground color in SwiftUI?

How to reset a 'Material Angular Stepper' Step?

Angular material stepper change icon color

How to change state icon in Angular Material stepper?

How to make CSS change in Angular Material Stepper?

Angular - How to Validate each step in Angular Material stepper

How to change color in Stepper according to active and completed Step

Angular material 2 stepper - next step

Angular Material Stepper Component For Each Step

How to stop user moving to next step until finish the current step using Angular Material Stepper(Angular 4)

How to move stepper from one step to second step using angular and angular material

How to change state icon in Angular material stepper dynamically created component?

Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS

How to customize colors in Material UI Stepper Step?

React Material UI - Change Stepper text color

Angular - Material Stepper Skips one step on Next Step Click

how to make active previous all steps of selectedIndex step using angular material stepper and angular 6

How to set second step as active step in Material-2 stepper?

Is it possible to change material UI steps when clicked on stepper icons?

Vuetify.js: how to change the color of the step's text in a v-stepper component?

How to set material stepper to open second item by default and set the icon color?(Angular Material)

is there an option to change icon for completed step in material-2 stepper

How to reset to step one Angular stepper CDK?

Allocating full width for the one step in the Angular Material stepper

Angular Material Stepper with Separate Component for each step - ExpressionChangedAfterItHasBeenCheckedError

different component for each angular material stepper step via *ngFor