CSS for completed mat-step in mat-vertical-stepper
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
andstepControl
are set, thestepControl
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;
}
Nandini S
Updated on June 25, 2022Comments
-
Nandini S almost 2 years
In
mat-vertical-stepper
I have 4mat-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 onlycompleted="true"
I am not getting any tick mark at all.need help for:
- how to give tick once a mat-step is completed
- after getting the tick mark, the tick mark should be in green(for which have to add CSS)