css - 我想以角度构建像这样的 Mat stepper

Question

这是用于选择状态的 css 我需要构建类似于这张图片的步进器不知道从哪里开始以及使用什么

    .mat-step-icon-selected {
    
       background-color: #2699FB !important;
       color: white !important;
     }
            
     .mat-step-icon-state-done {
        background-color: #2699FB !important;
        color: #fff !important;
     }

我已经使用 mat-icon 来显示图标和上面的 css 来格式化它们

        <mat-horizontal-stepper labelPosition="bottom" class="main" #stepper [linear]="true">
                <ng-template matStepperIcon="notcompleted">
                    <mat-icon style="color:#C4C6CC;">lens</mat-icon>
                </ng-template>
                <ng-template matStepperIcon="done">
                    <mat-icon>done</mat-icon>
                </ng-template>
            
                </mat-step>
                <mat-step state="done**strong text**">
                    <ng-template matStepLabel>X</ng-template>
                </mat-step>
                <mat-step state="notcompleted">
                    <ng-template matStepLabel>Y</ng-template>
                </mat-step>
                <mat-step state="notcompleted">
                    <ng-template matStepLabel>Z</ng-template>
                </mat-step>
            </mat-horizontal-stepper>