[Fixed] Angular material stepper change icon color

Issue

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

Solution

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}