Угловой материал степпера изменить цвет значка

Question

Я использую угловой 6 и угловой материал.Я использую коврик из углового материала.хотите изменить цвет значка коврика для шагов по умолчанию, активных и посещенных.Может кто-нибудь помочь с этим, пожалуйста?

: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;
}  

Также пробовал с этим:

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

Но не работает

Спасибо

Answer 1

Я могу изменить цвет на красный со следующим стилем в файле styles.css в корне проекта, а не в таблице стилей компонента

.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;
}

, чтобы скрыть числа внутри каждогопросто используйте display none в стиле класса ng-star-вставлен

.ng-star-inserted {display: none}