Material Icons with Angular CLI Projects

Using material-design-icons without extra 97+ thousand files.

If you develop your projects with the Angular framework, you most probably use also the Material Design Components for Angular, together with the Material Design Icons as an external dependency.

The official Getting Started guide suggests having a reference to the external stylesheet:

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

That is nice to get started with the project quickly, but may not work for many scenarios, as lacks offline mode. For example, running your Angular application inside a Docker container, or having an internal-only deployment, it still requires you to fetch the style from the outside.

The most common way it to install the material-design-icons library from the NPM and use the material-icons.css file from the node_modules/material-design-icons/iconfont folder.

The most significant issue with that approach is that it slows down the entire setup and build pipelines, including continuous integration, caused by the content of the package itself.

Let’s try to create an empty project with the Yarn using the following commands:

yarn init -y
yarn add material-design-icons

Next, inspect the size of the node_modules/material-design-icons. For the time of writing this article it is:

45,864,227 bytes (373.1 MB on disk) for 97,816 items

Yes, the numbers are correct, you have just installed more than 97 thousand of files just to get the web font.

The solution is to get the copy of the “iconfont” folder directly: https://github.com/google/material-design-icons/tree/master/iconfont

You can put it into the src/assets/fonts/material-icons/ folder of the Angular CLI project, to make sure it is being copied to the output automatically.

Next, update the angular.json file to include the web font into the index.html page when application gets compiled:

{
  "styles": ["./assets/fonts/material-icons/material-icons.css"]
}

Finally, you can test the font by updating the main application template with something like the following:

<h1>Material Icons</h1>

<i class="material-icons">account_circle</i>

<i class="material-icons">thumb_up</i>

As soon as you run the application with npm start or yarn start or ng serve commands, you should see the following on the main page:

The approach above needs manual maintenance. When the library is updated, you need to get the latest web font and update the local copy. However, this brings the following benefits for your projects:

• Faster dependency installs, especially when using CI
• Offline mode (internal networks, Docker, etc.)

I hope that helps you to improve the development and testing processes, alongside the continuous integration and deployment.

You can find the working project here: https://gitlab.com/DenysVuika/medium-material-icons.