Ionic Framework – Add custom icons, the easy way

Ionic Framework uses the awesome Ionicons (site) to provide icons that integrate nicely into the look and feel of the framework. This sounds great and it is, but a problem rises when a developer/designer wants to add icons that aren’t part of the default set of Ionicons.

I’ve encountered that exact issue and I’ve searched the Ionic forums to find an answer, but they mostly involved creating a new pack of icons and other things. These methods take up a lot of time and I figured it could be done much easier. So now I present you a easy, simple (and a bit CSS-hackey) solution.

Brief explanation
This method changes the CSS that is used by the original icons so they point to the image of the custom icon. The downside is that this makes 1 icon useless, but I can’t imagine all icons of the Ionicons being used in 1 project.

Walkthrough
Create a new Ionic project if you haven’t got one already. I’m going to use the tabs template because this template already has some icons.

Next up open the tabs.html file located at www/templates/tabs.html and take a look at the first tab (Status tab)

You see that the tab has 2 icons linked to it. The ‘icon-off’ icon is shown when the tab isn’t active and the ‘icon-on’ is shown when the tab is active (obviously).
In this tutorial I’m going to change the ‘icon-on’ icon to an icon that isn’t included in Ionicons.

icon start

The next step is to pick an image that you want to use as an item. I’ve chosen for a drawing of the head of a horse to work with.
The recommended size of the .png image is 32×32, the size that is used by Ionic for most of the icons.
After finishing the icon, put it into the ‘img’ folder of the project.

horse

Using the ‘ionic serve’ command we can get the app running in the browser (preferably Google Chrome) and search for the icon we have to replace. Hit F12 or right click + ‘Inspect element’ to get the developer tools window. Click the magnifying glass in the top left corner of the window and select the icon.
If everything went right you should see this code in window with the :before line selected.

On the right hand side of the window under Styles, this CSS is shown

Copy everything and save it for the next step.

Open the style.css file located in the css file of the project and create a new CSS rule using the CSS copied from the previous step. Delete the text after “content:”.
Add the text “url(‘../img/horse.png’) !important;” after “content” so the icon now points to custom icon you’ve created.
Don’t forget the “!important” after the url so the original icon is certainly replaced by the custom icon.

Check your browser again and the custom icon has appeared!
(I admit that it isn’t the most beautiful icon, but it does work to show of this method)

icon finsih

You can change an icon to anything you want, but keep in mind that you aren’t going to be able to use the original icon you’ve replaced.

16 thoughts to “Ionic Framework – Add custom icons, the easy way”

  1. I often visit your website and have noticed that you
    don’t update it often. More frequent updates will give your blog higher authority & rank
    in google. I know that writing content takes a lot of time,
    but you can always help yourself with miftolo’s tools which will shorten the time of creating an article to a couple of
    seconds.

  2. Unfortunately this method does not seem to work if I deploy my app to my iOS device (it does work indeed in my browser through ionic serve). Is this normal?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.