Customize the mat-stepper module provided by angular material

[rahul2270]

This is a...

Bug-Report/Feature-Request

What toolchain are you using for transpilation/bundling?

@angular/cdk: 5.2.3 @angular/cli: 1.7.2

Environment

NodeJS Version: v9.3.0 Typescript Version: 2.7.2

OS: Windows

Expected Behaviour:

I need to display the label of the step below the step icon as shown below.

Also, I need change the default icons values of 1, 2 & 3 for each particular step. As of now, I can only change the single icon from edit to done using the code below. (Only when the form status is valid)

check

This seems to be available in material as mentioned in material.io. Check below. https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers

Actual Behaviour:

Currently, the mat-stepper by angular material displays the mat-label right next to the icon as shown above. There seems no way to customize the placement of the label.

https://material.angular.io/components/stepper/overview

Additional Notes:

We are building a new product for one of our clients and we are strict with using angular material and flex layout only. A stepper needs to be implemented as of account creation flow.