Я могу изменить цвет на красный с помощью следующего стиля в файле 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-inserted

.ng-star-inserted {display: none}

Я пытался использовать ответ @mruanova, и я великолепен, но я хочу сделать шаг красным только тогда, когда он выбран.

Если вы хотите применить красный цвет только при выборе шага, используйте приведенный ниже css в родительском файле стиля:

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

Решение со стилем компонента (с использованием инкапсуляции представления)

Примерно то же, что и @mruanova, но с использованием инкапсуляции представления, поэтому стили могут быть в компоненте, например. 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;
}

Просмотр инкапсуляции на компоненте:

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

Примечание: также мой css немного отличается, поскольку влияет только на фон, поскольку я ставил зеленую галочку, а не редактировал с основной окраской.

Вы можете переопределить набор иконок прямо в 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>

Он работает даже с потрясающим шрифтом:

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

Для изменения цветов и других настроек, пожалуйста, проверьте https://stackoverflow.com/a/66428028/4184651

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit { цвет фона: #673ab7; цвет: #fff; }