How to change color of angular material stepper step icons
Solution 1
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.
Solution 2
Of course, you can use your own CSS and customize the background & foreground color. There's no need for ::ng-deep. (/deep/ and ::ng-deep are both currently deprecated)
With a couple of SCSS here's how my stepper looked: I have added SASS snippets needed for customizing the label and icons below:
Completed step & its label:
.mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: transparent !important;
color: $success;
+.mat-step-label{
color: $success !important;
}
}
In Progress step & its label:
.mat-step-header .mat-step-icon-selected{
// background-color: $primary;
background-color: transparent !important;
color: $primary;
+.mat-step-label{
color: $primary !important;
}
}
Todo/Default step & its label:
.mat-step-header .mat-step-label{
color: rgba(0, 0, 0, .54)
}
.mat-step-header .mat-step-icon {
color: rgba(0, 0, 0, .54);
background-color: transparent;
}
HTML for overriding default icons: I used font awesome icons to override the defaults:
<mat-horizontal-stepper>
<!-- Icon overrides. -->
<ng-template matStepperIcon="edit">
<i class="fa fa-check-circle"></i>
</ng-template>
<ng-template matStepperIcon="active">
<i class="fa fa-dot-circle-o"></i>
</ng-template>
<ng-template matStepperIcon="done">
<i class="fa fa-dot-circle-o"></i>
</ng-template>
<ng-template matStepperIcon="number">
<i class="fa fa-dot-circle-o"></i>
</ng-template>
</mat-horizontal-stepper>
Note: All SCSS should be in the global stylesheet and not in the component specific stylesheet. If the styles are present inside the angular component's file it will not be applied due to view encapsulation.
Please define the color variables if needed at the start of the SCSS file as below: Replace the HEX values with your theme colors.
$success: #35A255 !default;
$primary: #007CBB !default;
Solution 3
error = true;
.preenchimento-incompleto {
background-color: black !important;
}
.preenchimento-ok {
background-color: greenyellow !important;
}
<mat-step id="idDadosPessoaisFormGroup5" name="idDadosPessoaisFormGroup5" [ngClass]="error ? 'preenchimento-incompleto' : 'preenchimento-incompleto'" [stepControl]="dadosPessoaisFormGroup">
<form [formGroup]="dadosPessoaisFormGroup">
<ng-template matStepLabel>DADOS<br> PESSOAIS</ng-template>
<app-dados-pessoais [container]="stepper"></app-dados-pessoais>
</form>
</mat-step>
Solution 4
Using Ionic v4, in my case just added (inside :root):
.mat-step-header .mat-step-icon-selected {
background-color: var(--ion-color-primary);
}
To variables.scss file.
Solution 5
Inside of your scss file for you component do the following:
::ng-deep {
.mat-focused .mat-form-field-label {
color: green;
}
.mat-form-field-underline {
background-color: green;
}
.mat-form-field-ripple {
background-color: green;
}
}
Why you should use ng-deep instead of ViewEncapsulation.none
Disabling effect of ViewEncapsulation.None in Angular
https://medium.com/ng-gotchas/piercing-the-angular-style-encapsulation-c7030caeb519
phelhe
Updated on August 23, 2021Comments
-
phelhe over 2 years
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 themat-horizontal-stepper
component and eachmat-step
component, but neither one had any effect and I don't see a color input in the documentation. -
phelhe over 5 yearsThis is what I feared, thanks. Not sure why they let you change the color of some things and not others.
-
Nenad Radak over 5 yearsIf your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
-
phelhe over 5 yearsIs there a way to alter the theme for just mat-stepper-theme?
-
Vippy almost 5 yearsExactly what I was looking for! Thanks
-
Patricio Vargas over 4 yearsusing ViewEncapsulation.None is a terrible idea.
-
phelhe over 4 yearsAs is ::ng-deep in my opinion
-
Patricio Vargas over 4 yearsusing !important when you can approach the solution without it it's a bad idea. !important should be your last resource
-
Patricio Vargas over 4 yearsng-deep , yet and in fact is a better approach. stackoverflow.com/questions/49874788/… medium.com/ng-gotchas/…
-
Pallavi almost 4 yearsThanks! Works for Angular as well by adding above css in global scss/css file(styles)
-
Jeb50 almost 3 yearsI got
Undefined variable.
pointing tocolor
. Can you provide your .scss file? -
Evan MJ over 2 yearsThey generally come from a different theme stylesheet. If not available in your application, please add the color HEX codes at the beginning of the SCSS file. I have edited the answer to specify the color variables. @Jeb50