Mat Stepper Icon

Backed by open source code material streamlines collaboration between designers and developers and helps teams quickly build beautiful products.

Mat stepper icon. Follow the following steps to update the angular application we created in angular 6 project setup chapter. Ui component infrastructure and material design components for angular web applications. App module ts import browsermodule from angular platform browser. Material is an adaptable system of guidelines components and tools that support the best practices of user interface design.

I m trying to implement this design for the steps but not successful so far the closest i got was giving color to the line next to the current active step. The mat stepper an angular directive is used to create a wizard like work flow steps. If a step s label is only text then the label attribute can be used. In the component s template to display our icon we can then pass the icon label to the svgicon input property of mat icon like so.

Mat step components need to be placed inside either one of the two stepper components. For example mat icon home mat icon displays home icon. Import approutingmodule from app routing. 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 selected active 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.

Import ngmodule from angular core. We have to import maticonmodule from angular material modules. Mat vertical stepper mat.