Angular material stepper change icon color

Question

I am using angular 6 and angular material. i am using mat-stepper from angular material. want to change the mat-icon color for default, active and visited steps. Can anyone help with this please?

:host /deep/ mat-horizontal-stepper .mat-horizontal-stepper-header-container .mat-step-icon {
    background-color: "red" !important;
    color: #fff !important;
}

.mat-step-icon-selected,
.mat-step-icon-state-done,
.mat-step-icon-state-edit {
  background-color: "blue";
  color:#fff;
}  

Also tried with this:

/deep/ mat-step-header.mat-horizontal-stepper-header > div.mat-step-icon-selected {
    background-color:'red';
}

But not working

THanks

Answer 1

I am able to change the color to red with the following style in the styles.css file at the root of the project rather than the stylesheet of the component

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, 
.mat-step-header .mat-step-icon-state-edit {
    background-color: red !important;
    color: red !important;
}

to hide the numbers inside each step just use display none in the style of the class ng-star-inserted

.ng-star-inserted {display: none}

Answer 2

You can override the iconset directly in your HTML.

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="active">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="number">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
</mat-horizontal-stepper>

It even works with font awesome:

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

For changing colors and other customizations please check https://stackoverflow.com/a/66428028/4184651

Answer 3

I have tried to use @mruanova's answer and i is great but i only want to make the step red when it is selected.

If you want to apply the red color only when the step is selected, use the below css on the parent style file:

    .mat-step-icon-selected {
    background-color: red !important;
    color: red !important;
}

Answer 4

Solution with Style on Component (using View Encapsulation)

Roughly the same as @mruanova but using view encapsulation so the styles can be on the component e.g. a-stepper.component.css:

/**
    Change color of stepper icon to green, when completed.
    - NOTE: requires 'encapsulation: ViewEncapsulation.None' in component definition
 */
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
    background-color: green !important;
}

View Encapsulation on component:

@Component({
    selector: 'a-stepper',
    templateUrl: './a-stepper.component.html',
    styleUrls: ['./a-stepper.component.css'],
    providers: [{
        provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
    }],
    encapsulation: ViewEncapsulation.None
})
export class AStepperComponent implements OnInit {

Note: also my css is slightly different as only affects the background as I was putting a green tick rather than the edit with primary coloring.