is there an option to change icon for completed step in material-2 stepper

Question

Currently the icon for completed step is 'create'. How can I change it to some other material icon line, like 'Done' ?

<mat-vertical-stepper>
    <mat-step label="Agreement Preparation">
        <p>Agreement preparion is intiated by our side </p>
    </mat-step>
    <mat-step label="Ready for Biometric">
        <p>Agreement preparion is intiated by our side </p>

    </mat-step>
    <mat-step label="Document in Submission">
        <p>Agreement preparion is intiated by our side </p>

    </mat-step>
</mat-vertical-stepper>

Answer 1

The current version of the Material library supports this functionality. (5.2.3+)

Simply include an ng-template that defines your custom icon, and indicate which original icon ('edit' or 'done') you're replacing. The format looks like this:

<ng-template matStepperIcon="edit">
  <mat-icon>face</mat-icon>
</ng-template>

Here, I've replace the 'edit' icon with the material icon for 'face'. (This is a very distinctive icon I used for testing purposes.)

This ng-template goes inside the mat-vertical-stepper or mat-horizontal-stepper.

So, for your example, if you wanted to replace the 'edit' icon with the material icon for 'done', you would do like so:

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

    <mat-step label="Agreement Preparation">
        <p>Agreement prepariaton is initiated by our side </p>
    </mat-step>
    <mat-step label="Ready for Biometrics">
        <p>Agreement preparation is initiated by our side </p>
    </mat-step>
    <mat-step label="Document in Submission">
        <p>Agreement preparion is intiated by our side </p>    
    </mat-step>
</mat-vertical-stepper>

Here is a StackBlitz example showing this in action.

Answer 2

MatStep has property editable which blocks the step and sets the tick icon "done" to the step header. Run this line once the step is complete:

this.stepper.selected.editable = false;

How to set a step to done having the form unlocked I do not know, but it kind of make sense to indicate that the step is done/complete and lock it. You can again unlock it using editable = true, .next() or .previous() functions.