CSS for completed mat-step in mat-vertical-stepper

Question

In mat-vertical-stepper I have 4 mat-step. How can I have tick-mark once 1st step is completed?

I tried:

  <mat-vertical-stepper style="background:#f2ecec;" #stepper  [linear]="true">
    <mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true">
       <h3> Name </h3>
    </mat-step>
  </mat-vertical-stepper>

If I make editable="false", it is giving a tick mark and can't be editable as I made it "false". Having only completed="true" I am not getting any tick mark at all.

need help for:

1. how to give tick once a mat-step is completed
2. after getting the tick mark, the tick mark should be in green(for which have to add CSS)

Answer 1

Update 05/18 (icons)

According to the docs, icons can now be customized like this:

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <custom-icon>edit</custom-icon>
  </ng-template>

  <ng-template matStepperIcon="done">
    <custom-icon>done</custom-icon>
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

Original Post

In the official docs, it says:

Note that if both completed and stepControl are set, the stepControl will take precedence.

So, if you want to use the completed attribute you need to delete your stepControl.

If you want to change the icon, you might have to wait for this commit to be merged. Also, have a look at the MatStepHeader directive. It has an icon input property you can set; e.g. icon="done" for your tick mark.

There does not seem to be an option to change the color via the API, yet. As a workaround, you could use something like:

/deep/ .mat-step-header .mat-step-icon {
  background-color: red;
}

Answer 2

Just replace the iconset instead of explicitly marking the step as completed.

 <mat-horizontal-stepper>
        <!-- Icon overrides. -->
        <ng-template matStepperIcon="edit">
            <i class="fa fa-check-circle"></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>

For changing colors and other customizations please check https://stackoverflow.com/a/66428028/4184651