Google Material design system icons are simple, modern and friendly to use and to visualize. The icons are optimized for common platforms and screen resolutions.
The recommended way of including the icons in any project is from the Google servers directly on page loads, as shown below
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">However, in some situations it is better to host and serve the Material Icons locally from the Web application.
Advantages of Self hosting Icons
There are several advantages of self hosting any types of icons in general. The advantages of self-hosting stems from the disadvantages of the remote hosting.
- If the CDN (external) Server goes down, website will not display correctly in remote hosted icons, but self hosted is not affected.
- If the CDN Server becomes slow your website will also load slow in remote hosted icons, but self hosted is not affected.
- If you want to provide Offline support for your web application, i.e. load web app from a local hosted server.
- Privacy: Third party servers may collect your website user data thus raising privacy concerns.
- Security: Loading icon fonts from un-trusted sources has been known to pose phishing attacks in the past.
Steps to Host Google Material Icons locally
In this post, I am going to share how to include the material icons in an Angular project, although the steps are similar in general for any type of JavaScript/Typescript project.
Download and Extract the Icons
The icons are hosted on github and can be downloaded from this link. Download the Icons as ZIP. Then extract the ZIP file to folder.
Include the Icons inside the project
From the extracted folder open the folder named iconfont and copy all the files and paste them in a folder inside the project. In case of Angular, create folder named material-icons inside the assets folder and paste the copied files inside it.
Link the icons
In this step we will link the icons to the app. Notice that in the previous step the files that we copied also include a css file named material-icons.css. You can include this file directly in the index.html file of the project. However, since we want to make use of the bundler, we will instead include it in the styles.scss file as shown below.
@import '../assets/material-icon-fonts/material-icons.css';Remove the CDN link from the html file
This step may not be required if you have were not already using material icons from the CDN Server, something like the following.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">This is usually in index.html file in Angular. Just remove this resource and you are good to go.
That’s it! Just run the App and open it in the browser. Let me know in the comments how it went.
Also checkout my previous post on How to add your own custom Material icons in case you could not get the one in the default icons.
