Как изменить цвет фона иконки шага?

Question

 <mat-horizontal-stepper #stepper>
        <mat-step class="red-stepper">
            <ng-template matStepLabel>
                <span>Step 1</span>
            </ng-template>
        </mat-step>
        <mat-step class="red-stepper">
            <ng-template matStepLabel>
                <span>step 2</span>
            </ng-template>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>
                <span>Step 3</span>
            </ng-template>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>
                <span>Step 4</span>
            </ng-template>
        </mat-step>
</mat-horizontal-stepper>

Например, у меня есть 4 шага коврика, но я хочу изменить цвет первых двух из них, как мне этого добиться? Я знаю, как изменить выбранный, но это не так.

Я пробовал применять bg-цвет степпера в разных классах, но безуспешно.

.red-stepper {
    .mat-step-icon {
        span.ng-star-inserted {
            background-color: red !important;
        }
    }
    background-color: red !important;
    .mat-step-header .mat-step-icon {
        background-color: #007FAD !important;
    }
}

Answer 1

Если вы пытаетесь применить стиль в родительском компоненте, попробуйте:

:host {
  ::ng-deep {
    mat-step {
      &.red-stepper {
        background-color: #000;
      }
    }
  }
}