Angular Material Icons Mat Icon

Npm install material design icons angular cli json sty.

Angular material icons mat icon. Ui component infrastructure and material design components for mobile and desktop angular web applications. Material is an adaptable system of guidelines components and tools that support the best practices of user interface design. Mat icon selector is used to display material icons in angular we have around 900 angular material icons to show the below mat icon list icons we need to load material icons css provided by google mat icon is part of angular material module called maticonmodule we can use font ligature as an icon by putting the ligature text in mat icon component. Use the following command to display an icon.

Import maticonmodule from angular material icon. Material icon not rendering properly in my project i installed properly but even though not showing in browser. In order to prevent xss vulnerabilities any svg urls passed to the maticonregistry must be marked as trusted resource urls by using angular s domsanitizer service. When developing an angular application with angular material there comes a point when we need to add icons on our components or buttons etc.

Backed by open source code material streamlines collaboration between designers and developers and helps teams quickly build beautiful products. This makes svg icons by default have the same color as surrounding text and allows you to change the color by setting the color style on the mat icon element. The mat icon an angular directive is used to add a vector svg based icon with material styling. In this chapter we will showcase the configuration required to draw a icon control using angular material.

Mat icon icon name mat icon you can change the color of the icons as per the requirement. Angular material has the mat icon component for doing this. These icon may be used as buttons or may convey some message such as type of form field status etc.