Import Google Material Icon in Ionic Apps


#1

Hello all,

I would to import Google material design in my ionic app. When i used ionic serve command line i can see icons but when i run on Android device i can’t see icons.

Also this is my font-face declaration, i used it in my app.scss file

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../assets/fonts/material-icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

also my declaration in home.html

<i class="material-icons icon-arrivee">flight_land</i>

Please i need help

Best Regards


#2

This is how I imported my fonts, instead of putting the imports in app.scss I put them in src/theme/variables.scss

This is how I imported them

@font-face {
font-family: 'opensans';
font-weight: 300;
font-style: normal;
src: url('../assets/fonts/OpenSans-Regular.ttf') format('truetype'),
}

Then to use it (in my case I was overwriting all android fonts)
$font-family-md-base: "opensans";


#3

Hello philipgriffin,

thank for your replie but in case i don’t use font for text but i would to use icon font. How i can tell ionic to add my custom icon in all generated platform.

When i start my ionic serve command, ionic show custom icon, but when i export to ios or android platform ionic doesn’t show my custom icon.

Regards,


#4

Did you try adding it to your src/theme/variables.scss instead of the app.scss


#5

Hello philipgriffin,

I have added my code into src/theme/variables.scss and i get the same error. In my browser i can see icon, when i export to android platform i see a icon name not a svg image.

Regards,


#6

Somone can help me to solve my issue ?

Regards,


#7

Nothing seem to work with custom font when building with the latest ionic


#8

Hello jeffreyCarre,

Finally i used ionic default icons for my app. But i can add fontAwesome icons in my app ?

Regards,


#9

All the updates are stable now

Well there was some issues with the last Ionic updates + other dependencies that are fixed now. So any iconSet module or any fonts should be working now.
tested with :

For other custom font-icons

(or any other custom fonts)

I had to create the .EOT, .WOFF, .WOFF2 and .TTF using transfonter.org, put them in src/assets/fonts and for every version of the font according to the font-weight i had to put a @font-face declaration in theme\variable.scss like this :

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

...


@font-face {
  font-family: "Raleway";
  src: url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.eot");
  src: local("Raleway ExtraBold Italic"), local("Raleway-ExtraBoldItalic"),
  url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"),
  url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.woff2") format("woff2"),
  url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.woff") format("woff"),
  url( $font-path + "/Raleway/Raleway-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;

}

Its working on both serve and build ( even --prod)


#10

Hello jeffreyCarre,

i try it. thank

Regards,