Now, navigate to the shared/modules/ and open it in your favorite editor or IDE (I’m partial to VS Code myself) and add the MatIconModule as follows: import Note that the “g m” is short for “generate module”. Here’s how to create the file using the ng command: ng g m shared/modules/material

I personally like to create a separate module dedicated to angular material components that includes only those components I need. That way, you can choose to include as few or as many components as you need. It’s all good! Importing the Material Icon ModuleĮvery Material component is declared in its own module. Ng add The CLI will now ask if you’d like to include Angular Material Typography and Animations packages

The following command will add the angular material ui library:.

Next, CD into the angular-mat-icons-tutorial project folder and you’re ready to get started! Installing the Angular Material UI libraryīefore we can use Material Icons in our project, we have to set up the Material UI library. Here’s the command to create a new project using the Angular CLI: ng new angular-mat-icons-tutorial You may already have a project to which you’d like to add Material Icons, but for the sake of this tutorial, we’ll create one from scratch. To learn about Javascript check out TechRepublic Academy! Setting Up the Test Project SVG icons will be the subject of an up-coming article. As we’ll learn in this tutorial, adding Material Icons to your Angular projects is easy enough that there’s really no excuse not to! We’ll be focusing on font-based icons here today.

Material Icons are provided using two flavors: font and SVG. These are beautifully crafted symbols for common actions and items for use in Android, iOS, and Web applications. For those of us who develop using Angular, we have a tremendous variety of icons to choose from, thanks to Material icons. Judicious use of icons can help convey the meaning of application elements and greatly enhance user experience.

Angular installation