Add material icons to an Ionic 3 project

Issue

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:

<ion-tab [root]="tab1Root" tabTitle="Something" tabIcon="some-material-icon"></ion-tab>

Thanks.

Solution

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:

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

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:

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

Answered By - Ilkin Sam Elimov