Use Font Awesome Icons In Your Ionic 2 Android And iOS App

Creating your own in-app icons can be a real pain.  Having to worry about all the different Android and iOS icon sizes is not a pleasant task, specially when web developers have it easy with icon packs like Font Awesome.  Lucky for us, Ionic is a mobile web application, so we can enjoy the same benefits that web developers have.

Previously, I demonstrated how to include Font Awesome into an Ionic Framework 1 application, but that version of the framework is becoming old news because Ionic 2 is stealing the spotlight.

This time around we’re going to see how to use the 400+ icon fonts that Font Awesome offers in our Ionic 2 Android and iOS application.

Let’s create a new Ionic 2 Android and iOS project.  From the Command Prompt (Windows) or Terminal (Linux and Mac), execute the following commands:

A few important things to note.  You must be using the Ionic CLI that supports Ionic 2 applications.  You must also be using a Mac if you wish to add and build for the iOS platform.

We can include Font Awesome into our project through the Node Package Manager (NPM).  With your project as the current working directory, execute the following command:

The font data which includes CSS and font files will now exist in the node_modules directory so it is our job to include them for use.

Open the project’s ionic.config.js file and make it look similar to the following:

Most of this file was left as the default with two exceptions.  In the sass property we have the following:

More specifically the following line:

When we include this directory we can do imports without having to worry about all the paths to find the files we need.  The Font Awesome SCSS files become visible from a root level.

The second change in the ionic.config.js file is found in here:

Notice that we’re adding the font files to the build directory so they can be accessed via our compiled application.

With the packaging stuff out of the way we can now prepare the fonts fore use.  Open the project’s app/theme/app.core.scss file and add the following line:

Remember we previously set up access to all the Font Awesome SCSS files at the root level which is why we didn’t have to do any path manipulations.

At this point in time we can now use Font Awesome as described in the official documentation.  Let’s give it a shot.  Open the project’s app/pages/home/home.html file and change it to look like the following:

It is pretty similar to how the Ionic 2 documentation describes how to use icons.  In the Ionic 2 documentation it says to do something like this:

Notice we are swapping <ion-icon> with <span> tags.

If everything went well you should now have access to not only IonIcons, but Font Awesome icons as well.  The same rules can be applied if you wish to include other icon packs as well.

Conclusion

You just saw how to include additional icon packs within your Ionic 2 application.  In this case we saw how to include Font Awesome, but the same rules can be applied to others.  I did write about including Font Awesome in an Ionic Framework 1 application, but as we can see things were very different in this case due to how Ionic 2 handles theming with SASS.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • aluknot

    Nice tut.

    Btw, i don’t usually ask for this but Nic, would be cool if you make a tutorial of how to make a search in a ionic 2 app!

    Nice blog.

  • Warner

    @[email protected]:disqus For new ionic 2, it is now using gulp for building the app.
    Could you show us how to configure that in gulp?
    Thanks a log

  • Warner

    @Nic Raboy For new ionic 2, it is now using gulp for building the app.

    Could you show us how to configure that in gulp?

    Thanks a lot.

  • rout0978

    Nice work! Once question though: Where is this file ionic.config.js in the project? Of course there is ionic.config.json. Moreover I guess, this stuff can also be done in gulfile.js. correct?

    • When Ionic 2 enters stable release I will be updating this tutorial. The ionic.config.js file no longer exists and since the framework changes too frequently, I can’t keep up with the changes. This is why I’m going to wait until it goes stable.

      Best,

    • KingOfMyRoom

      You can find the answer on the ionic forum
      https://forum.ionicframework.com/t/extend-ionic2-add-custom-fonts-icons-ionic-config-json/48589

      1) npm install font-awesome
      2) Edit app.core.scss and add this line: @import “font-awesome”;
      3) Edit gulpfile.js to add options to the sass and fonts tasks:
      gulp.task(‘sass’, function(){
      return buildSass({
      sassOptions: {
      includePaths: [
      ‘node_modules/ionic-angular’,
      ‘node_modules/ionicons/dist/scss’,
      ‘node_modules/font-awesome/scss’
      ]
      }
      });
      });

      gulp.task(‘fonts’, function(){
      return copyFonts({
      src: [
      ‘node_modules/ionic-angular/fonts//.+(ttf|woff|woff2)’,
      ‘node_modules/font-awesome/fonts/
      /.+(eot|ttf|woff|woff2|svg)’
      ]
      });
      });

      4) Edit gulpfile.js to remove these two lines
      gulp.task(‘sass’, buildSass);
      gulp.task(‘fonts’, copyFonts);
      5) Test in your html file:

  • Nice work!

    One suggestion, use , because the ionic css have a class name ion-icon with padding/margin and etc.

  • Hi Nick, I am using ionic 2.1.8, my ionic.config.json is like
    {
    “name”: “myapp”,
    “app_id”: “9999999”,
    “v2”: true,
    “typescript”: true
    }

    It’s different, how should I add font-awesome then? or even ionicfonts (because default one doesn’t contains all of the icons)

      • mri

        Hi. I am new in Ionic 2.
        I have the same problem. I visited your link. Ran npm install @[email protected] –save-dev. I did not find any solution.

  • Dimitri Podoliev

    Same here… Latest versions of Ionic2 don’t have the same file structure, so files like ionic.config.js and app/theme/app.core.scss no longer exist. Anybody know how to solve this with latest versions of Ionic2?