Add material icons to an Ionic 3 project - ionic-framework

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:
<ion-tab [root]="tab1Root" tabTitle="Something" tabIcon="some-material-icon"></ion-tab>
Thanks.

Answer 1

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>

Answer 2

Follow this doc: http://google.github.io/material-design-icons/
the easy way:
1.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">face</i>

Answer 3

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
<span class="mi mi-face"></span>