Using Ionicons in Ionic 2

Hi Friends,

Hope you are well. This post is a response to many of my friends asking me how to use ionicons in Ionic 2. Its quite simple actually and I will explain how to do it in few simple steps.

Step 1:

Download ionicons from here. Extract the contents to any location, open it and copy the contents of the scss folder.

Step 2:

Create a directory called icons inside your project’s app folder and paste the copied files inside this directory as shown below.


Step 3:

Open up the app.core.scss file inside the theme directory and add the below line of code in it.

That’s it; you are set to go.

Step 4:

Now just open up your html files and add icons using the <ion-icon> tag.

Few examples:

Hope this helps you. Thanks for reading. Have a nice day. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • anthony garera

    No luck with getting it to show up, same with Font Awesome too

    • Which version of ionic 2 are you using bro..?

      • anthony garera

        Latest Ionic 2 Build which is 5 but as of today Beta 6 is out.

    • Tycho Grouwstra

      same here :(

  • It’s not working bro (ionic 2.1.8)

  • Anil Kumar

    Thanks for the tutorial .. it is working for me
    please update the above line instead of copying in app.core.scss file we have to paste these line in variable.scss as @import '../app/icons/ionicons'; and you find the file under theme directory