如何在angular mat-stepper中显示默认图标而不是“完成”图标

<mat-horizontal-stepper #stepper>
  <mat-step [completed]="true">
    <ng-template matStepLabel>Step 1</ng-template>
    Content for step 1
  </mat-step>
  <mat-step [completed]="false" matStepperIconContext="custom-icon">
    <ng-template matStepLabel>Step 2</ng-template>
    Content for step 2
  </mat-step>
</mat-horizontal-stepper>

.custom-icon::after {
  content: '❓'; /* 使用你想要的图标 */
}

import { Component } from '@angular/core';
import { MatStepIcon } from '@angular/material/stepper';

@Component({
  selector: 'app-custom-step-icon',
  template: `<mat-icon>{{ icon }}</mat-icon>`,
  styleUrls: ['./custom-step-icon.component.css']
})
export class CustomStepIconComponent extends MatStepIcon {
  icon = 'help_outline'; // 使用你想要的图标名称
}

<mat-horizontal-stepper #stepper>
  <mat-step [completed]="true">
    <ng-template matStepLabel>Step 1</ng-template>
    Content for step 1
  </mat-step>
  <mat-step [completed]="false">
    <ng-template matStepLabel>Step 2</ng-template>
    Content for step 2
    <div class="step-icons">
      <app-custom-step-icon></app-custom-step-icon>
    </div>
  </mat-step>
</mat-horizontal-stepper>

.mat-step-header .mat-step-label.mat-step-completed .mat-step-icon {
  background-image: none !important;
  content: '❓'; /* 使用你想要的图标 */
}