Angular 角度材质步进器-替代动态步进的图标

我有一个角度材料步进器组件，其中的步骤是动态加载的。我想为我的步骤自定义图标，而不是默认的数字。我正在使用自己选择的图标定义

ng模板

，并将

状态

属性添加到我的

mat步骤

。这个语法有什么问题吗？我仍然获得默认编号

<mat-horizontal-stepper [selectedIndex]=currentStep (selectionChange)="selectionChanged($event)" [linear]="true" labelPosition="bottom">

    <ng-template matStepperIcon="mail">
        <i class="fas fa-mailbox"></i>
    </ng-template>

    <mat-step [completed]="step.completed"  *ngFor="let step of steps; let i = index"  [label]="step.name" state="step.state">
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>
        <router-outlet  *ngIf="i === currentStep"></router-outlet>
    </mat-step>

</mat-horizontal-stepper>     

 steps: IProposalStep[] = ProposalStatusesConst;

export const ProposalStatusesConst: IProposalStep[] = [
    { name: 'Employer Basics', urlPath: 'employer-basics', state: 'mail', completed: false},
    { name: 'Employee Demographic', urlPath: 'employee-info', completed: false},
    // { name: 'Employee Coverage Lines', urlPath: 'coverage-lines' },
    { name: 'MHQ', urlPath: 'mhq', completed: false },
    { name: 'Products And Pricing', urlPath: 'products-and-pricing', completed: false },
    { name: 'Generate Proposal', urlPath: 'proposal-generation', completed: false }
];