I want to build Mat stepper something like this in angular

Question

This is the css used for selected state I need to build the stepper similar to this picture don't know where to start and what to used

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

I have used mat-icon to display the icon and above css to format them

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