Then, use npm to install Angular CLI as a devDependency: Step 1 - Creating an Angular Project and Installing Dependenciesįirst, open your terminal and create a new project directory: You can refer to this post if you’re getting started with Angular Material. This tutorial was verified with Angular v10.0.5 and Angular Material v10.1.1. This tutorial was originally written with Angular v5.2+ and Angular Material v5.2.4. This post assumes you have some basic knowledge of Angular v4.2+.

Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.

To complete this tutorial, you will need: The full working code can be found on this GitHub repo. Then, you will use the component to support a custom SVG icon.

In this tutorial, you will use the component to use the standard Material Icons font.

But what if we want to display some custom icons while staying consistent with the Material Design styling? Let’s learn how to use our own SVG icons in Angular Material components. There are a wide range of ready-made Material icons. The Angular Material library offers a suite of Angular components styled with Material Design.

User svg icon