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)