Extend ionic / add custom fonts/icons (ionic.config.json)


Good evening my friend, I managed to make it work. I removed the lines you listed, deleted the build folder, then run the ionic serve command again. The gulp could import sources to the folder just right. Now I will try to make the import of icomoon.

Thanks a lot for the help.


I followed the same steps, but using other type of font (google maven), which is local under my app folder. I then copied all the fonts with the gulp task to www/build/fonts.

In the app.variable I tried to set $font-family-base to have my custom font name.

When I run the app and debug it, my custom font is there, but current font-family is still the old one.

Any clue?



@tim @brandyshea
the projects, generated with the new ionic-cli 2.1, using ionic 2.0.0-rc.0 do not have gulpfile.js anymore. What is the way to add custom fonts and icons now?

I must use both font-awesome and other custom fonts in my application, so it’s really important to know how to do it with the new build process.


Edit: I found out that everything from the src/assets/ directory is already configured to be copied in the www/assets/ directory, so custom fonts can be just dropped there and referenced from the scss file.
Still wondering how to use fonts and scss from external libraries, installed with npm, like font-awesome.


I do like this:

  1. Copy/paste font-awesome files (.ttf, .woff, .woff2) to src/assets/fonts directory.

  2. Copy/paste font-awesome.scss to src/theme of your app.

  3. Open font-awesome.scss and add below font-face instead of exist:

    @font-face {
    font-family: ‘FontAwesome’;
    src: url(’…/assets/fonts/fontawesome-webfont.eot?v=4.6.3’);
    src: url(’…/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3’) format(‘embedded-opentype’), url(’…/assets/fonts/fontawesome-webfont.woff2?v=4.6.3’) format(‘woff2’), url(’…/assets/fonts/fontawesome-webfont.woff?v=4.6.3’) format(‘woff’), url(’…/assets/fonts/fontawesome-webfont.ttf?v=4.6.3’) format(‘truetype’), url(’…/assets/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

Notice: Your font-awesome version might be different from 4.6.3, so check it before copy!

  1. Open variables.scss file which is in the src/theme and import font-awesome like below:

@import "font-awesome";

  1. Done! :relaxed: You can use font-awesome classes in your app like below:

<ion-icon class="fa fa-heart"></ion-icon>


Yes, it’s always an option to copy the font-awesome’s files in the /src/assets directory. But I would like to know how to use it as npm package instead, because I would not like to mix my own code with library code and I would like to manage it via npm and update it easier.
At this point it’s still not clear to me if there’s a way to do it, because the gulpfile.js is removed from the new build process and there are no overridable configurations of the new build tasks at project level.


Just figured this out for the Ionic 2 Release Candidate:


@pdrosos did you mind a way? I wasn’t able to do it.

@scottlott thanks for the link. I tried doing it this approach. copy everything you had but it didn’t work.

Did anyone get @scottlott example to work?


Arcen, could you paste in the error message you’re getting?

You do need to have fs-extras installed, so try running this command:
npm install --save fs-extra


@scottlott Not getting an error. After following the steps i wasn’t able to use font-awesome. is there another step i might have been missing?


The only other thing you have to do is make sure Font Awesome is linked in your HTML file. Inside your header on src/index.html:

<link href="libs/fa/font-awesome.min.css" rel="stylesheet"/>


@scottlott Nice! TY it worked. Can’t believe i forgot to add the link lmao


This worked well for me.


Thanx, I use this because ionic scripts in rc0, rc1 are not yet stable…


Thanks Behnamazimi…it works for me. However, fonts being copied to www/assets/fonts folder have zero sizes. I had to copy the files manually. Could this have any thing to do with the watch script? If so, how can we fix it?



Hello @tim,

Awesome answer, I’d like to know if there are a limited fonts that can be added in a project this way. I’m adding some fonts to my project that I don’t think they are in that list. How am I supposed to add them to my project? I see there are still not enough documentation for that.

How am I able to import that typography?


I was struggling with font-awesome as well… if anyone is on RC4 and still having trouble there’s a great tutorial at http://chriztalk.com/ionic-2-font-awesome/


Thanks, this works for me!


Thanks,this works for me…


It works but with some quirks. I´ve downloaded the package from fontawesome.io:

  • I had to paste all the sass imported by font-awesome.scss
  • There is a conflict with the existing variables.scss so i’ve to rename it to variables-fa.scss and
  • Edit to @import "variables-fa" inside font-awesome.scss
Cordova CLI: 7.0.1
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0


@iignatov This worked like a charm for me ! Thank You guys !!