Mat Step Icon

Styling mat step icon and label together closed posted on march 28 2020 by eddy freeman.

Mat step icon.

Mat step header mat step icon background color. Follow the following steps to update the angular application we created in angular 6 project setup chapter. Host deep mat horizontal stepper mat horizontal stepper header container mat step icon background color. In this chapter we will showcase the configuration required to draw a stepper control using angular material.

I just give a class to the mat horizontal stepper element with the index of the active step. 8dp label top padding. After making changes in the app module ts file it will look like this. Angular material button module matbuttonmodule mat button mat raised button mat icon button mat fab mat mini fab enhances the user experience of normal buttons button and anchor a tags by following material design principles.

This is of type saferesourceurl. In production environment those reflect active attributes don t exist so i came up with this solution based on the index of the elements. When you want to perform an action in webpage use button and use an anchor tag to navigate to other pages. I m using angular material stepper and would like to style the active icon and label together to give them rounded borders with blue background.

Rgba 167 35 35 0 54. Icon left and right padding. 16dp icon and label padding from edge. The addsvgicon registers our icon by taking in 2 arguments the first one being the icon label which is of type string.

To parse the url path string into saferesourceurl we can make use of the domsanitizer provided by angular. 16dp label bottom padding. Alternative label placement with optional step. Icon left and right padding.

Basic container mat step header mat step icon selected background color. Mat step icon selected mat step icon state done mat step icon state edit background color. Also tried with this. The second argument is the relative url path pointing to the location of the icon.