CODEWITHSUNDEEP
ionic-frameworkionic3
Daniel
Daniel

Reputation: 534

Add material icons to an Ionic 3 project

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.

Upvotes: 3

Views: 7792

Answers (3)

Ilkin Sam Elimov
Ilkin Sam Elimov

Reputation: 698

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>

Upvotes: 6

Nazehs
Nazehs

Reputation: 558

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>

Upvotes: 0

Alejandro Lava
Alejandro Lava

Reputation: 1

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">

  1. <i class="material-icons">face</i>

Upvotes: 0

Related Questions