Add material icons to an Ionic 3 project

Question

Our web app has these material icons: https://fonts.googleapis.com/icon?family=Material+Icons

And we're currently developing the mobile version in Ionic Framework 3, and we want to use the same icons, but some of them aren't included in the framework.

How can I add them? Ideally, I would want to use them like the other Ionic icons:

Thanks.

user_3964036 · Answer

Maybe it's a late answer but I want to share what I know.

Firstly, you can import easily by using Google's font url, but this will not work if user's device doesn't have internet connection:

INSTEAD, I recommend importing the whole font into the project. To do this, you can download all MaterialIcons font types of different platforms(eot, ttf, woff, woff2, ijmap, svg):

https://drive.google.com/file/d/1pq9dHrfWBsd5NFoaaB76tZ8nEzBbGrbN/view?usp=sharing

Then, extract files and move them under assets/fonts/ folder of your Ionic project. In the variables.scss you can find this line of code:

$font-path: "../assets/fonts";

If you don't have just add that line. And also, introduce your project with new font by adding these code blocks into the variables.scss:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url($font-path + '/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url($font-path + '/MaterialIcons-Regular.woff2') format('woff2'),
    url($font-path + '/MaterialIcons-Regular.woff') format('woff'),
    url($font-path + '/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

That's it! Use the icons where you need them:

icon_name_here

user_7468924 · Answer

Well, I hope this might be helpful for someone using ionic 4. To add the material icons in your ionic 4 app the following steps worked for me.

ng add @angular/material

follow the instructions on the CLI based on your preference.

for usage in your html

Add material icons to an Ionic 3 project

3 Answers