9/7/2017 How to use custom icons on Ionic 3 Yann Braga

HOME

CONTACT

Search

ABOUT ME

[ CUSTOM ICONS ] [ IONIC3 ]

HOW TO USE CUSTOM

ICON S O N IONIC 3

June 28, 2017

One of the trending topics I see in the Ionic

YANN B R A G A
community is the usage of custom icons in an
application. There are already awesome icons built in Web and mobile developer.
with Ionic 3, but sometimes you just want to make Occasionally does some
your application look more unique, or perhaps a origami on spare time :)
designer gave you a set of image icons and you dont Github Linkedin
know the best approach to use them. In that case, I
highly recommend you to create your own font using
SVG icons. This way, regardless of the icon size, it
will look perfectly sharp in any device.
RECENT POSTS

Today, Ill be showing you the exact steps to integrate

your custom icons and the ion-icon element.
How to use custom ic
This tutorial is inspired in this stack overflow topic.
The day I became a J

G e t t i n g the icons
Ionic custom compon
First of all, youve got to get your SVG icons. If you
already have your icons or dont want to pick

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 1/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

icons manually, you can skip this step.

How to make a trans
Im no designer, so I use icons made by others.
Theres an amazing platform called The Noun Project,
echo Hello World
which contains thousands of icons of every type and
category you could think of. Really, you can search
basically anything and youll find fantastic stuff. The
icons are all free with creative commons, so we can
ARCHIVES
create an entire set from there. In this example, well
be using just a few, for testing purposes.
June 2017

March 2017

C AT E G O R I E S

custom icons

hackathon
Generating our new font
After downloading the desired icons, we are going to
input properties
use an app called Icon Moon, which basically can turn
a set of SVG icons into a font that a browser can Introduction
easily understand. This app already has a few sets of
icons (most of which are free), so if you havent ionic2
picked your SVGs from somewhere else, you can get
from there (you can browse its icon library). ionic3

Ok, the first thing well do is import our SVGs:

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 2/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

Right after, we select which icons we want in our font

and click on FONT:

Then well get to a screen where it shows the icons

configuration:

The icon names will be the name of our svg files. I like
to have a way to distinguish between custom and
default stuff, so the icons will all have a prefix of ai-
(amazing icons). In this screen we can change the
icon names, and also their content code. After setting
everything up, we press the Download button at the
right bottom corner and thats it! The app will generate
our webfont with all those nice icons.

G e t t i n g the css ready

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 3/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

After finishing downloading iconmoon.zip, open it up

and youll see a bunch of files. What we want to use is
style.css and the fonts folder, so ignore the rest. Add
the font files to src/assets/fonts/, then rename the
style.css file to icons.scss and add it under src/theme/.

Then, reference the newly created file on app.scss by

adding this line: @import "../theme/icons"

Open up your recently added icons.scss.

First of all, add../assets/ to every path generated by

iconmoon:
from: src: url('fonts/icomoon.eot?39m2i2');
to:src: url('../assets/fonts/icomoon.eot?39m2i2');

To make our icons work the same way as ion-icons,

we have to add classes for device platforms (ios and
android) just like ion-icon does. We have to do so
because the ion-icon component renders the inside
elements with dynamic classes generated depending
on the platform the user is on, so we have to cover all
cases. In case you want it for windows phone too, add
the .ion-wp prefix as well.

Here Im using an example for ai-pacman and ai-rock:

1 .ai-pacman:before ,
2 .ion-ios-ai-pacman:before ,
3 .ion-ios-ai-pacman-outline:before ,
4 .ion-md-ai-pacman:before ,
5 .ion-md-ai-pacman-outline:before {
6 content: '\e916';
7 font-size: 26px;
8 }
9
10
11 .ai-rock:before ,
12 .ion-ios-ai-rock:before ,
13 .ion-ios-ai-rock-outline:before ,
14 .ion-md-ai-rock:before ,
15 .ion-md-ai-rock-outline:before {
16 content: '\e905';
17 font-size: 26px;
18 }

Did you notice how poluted this gets? For each and
every icon, we had to add 8 lines of code. I wonder
how many lines we would have to write for over 30-50
icons.. Nah, too much work.

Fortunately, by using SASS we can create something

called mixin. Mixins work similar to functions in

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 4/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

javascript, in a way that we can define something that

receives a set of arguments and outputs some css
code. This way we can eliminate all our effort by
creating a mixin that automates the process for us:

1 @mixin makeIcon($arg, $val) {

2 .ai-#{$arg}:before ,
3 .ion-ios-ai-#{$arg}:before ,
4 .ion-ios-ai-#{$arg}-outline:before ,
5 .ion-md-ai-#{$arg}:before ,
6 .ion-md-ai-#{$arg}-outline:before {
7 content: $val;
8 font-size: 26px;
9 }
10 }

Now we only have to write a single line of code for

each icon:

1 @include makeIcon(ai-rock, '\e905');

2 @include makeIcon(ai-pacman, '\e916');

Still.. refactoring the css to use the mixin is quite an

effort. As I like to automate stuff, I use the tools in my
favor. I created a find-replace regex to do that job for
us (replace ai for whatever prefix you are using):

find: \.ai-([\S]*):before {\n\s*content: "(.*?)";\n}

replace: @include makeIcon($1, '$2');

With that you can do a find replace from your editor

and get from this:

To this:

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 5/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

ps: For some reason that regex doesnt work on

Visual Studio Code. I still dont know why.

For some reason which Im still trying to figure out, if

we try running the project now, all custom icons will
work, but Ionics default icons will break. What we
have to do to fix this is go to variables.scss and change
the line that has @import "ionic.ionicons"; to @import
"ionicons";:

1 // In order to make custom icons work and not break ionic icons, change ionic.ionicon
2 // @import "ionic.ionicons";
3 @import "ionicons";

We are done! Now our project is fully capable of using

either Ionic default icons or our custom icons! The
usage is the same, we just need to use our custom
icons names such as:

1 <!--Using with ion-icon-->

2 <ion-icon name="ai-pacman"></ion-icon>
3
4 <!--Using with ion-tabs-->
5 <ion-tabs>
6 <ion-tab [root]="tab1Root" tabTitle="Default icon"
7 <ion-tab [root]="tab2Root" tabTitle="Custom icon"
8 <ion-tab [root]="tab3Root" tabTitle="Custom icon"
9 </ion-tabs>
10

And heres the result:

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 6/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

Thats it! I hope you guys find this tutorial useful, and
please let me know in case of any questions.

You can access a repository with the whole project

here.

. By Yann Braga . 20 Comments

YOU M AY A L S O LIKE

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 7/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

IONI C C U S TOM
COMP O N E NTS
AND T E M PLATES
June 2, 2017

20 Comments yannbraga Avatar

Sort by Best
Recommend 4 Share

Join the discussion

Tibi a month ago

Best tutorial out there for adding custom icons.
Cheers man, I owe you a pint!
1 Reply Share

Jeronimo Nascimento a month ago

Great tutorial, it helps a lot!
Thanks!
1 Reply Share

Yann Braga Mod > Jeronimo Nascimento a month ago

My pleasure, I'm really glad it was useful for you!
Reply Share

Guille Acosta 8 days ago

Hi there, great job man! But I'm facing a problem with your
implementation:
I'm getting weird icons, seems like browser shows some default icons
instead of "icomoon" ones.
Do you know why?
I already checked every commit of your repo and also checked that
stackoverflow link you've posted and everything seems to be ok.
Maybe font files are corrupted? Hope to read your reply.

global packages:

@ionic/cli-utils : 1.5.0
Cordova CLI : 7.0.1
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
Ionic CLI : 3.5.0

local packages:

@ionic/app-scripts : 2.0.0
see more
https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 8/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga
see more

Reply Share

Yann Braga Mod > Guille Acosta 8 days ago

Hey @Guille Acosta , thanks for trying this tutorial out! By
checking the console section of your image, I notice the browser
is having a hard time to decode the font file. Check if your css
@font-face rule specifies every file format (ttf, woff, eot, svg)...
like you can see here: https://github.com/yannbf/i...

Also check if you have your paths correctly, like Max Helskens
did on the previous comment.

In case you can't fix the issue, please upload a sample of the
project so I can assist you better.
Cheers!
Reply Share

Guille Acosta > Yann Braga 7 days ago

I missed '/assets' in my path. Now it's working fine.
Thank you!
Reply Share

Max Helskens 17 days ago

Thanks for the great tutorial, my custom icons work perfectly. I have
one problem however, the original ionicons won't appear anymore..
I checked the repo but I can't find anything wrong with my code.
Reply Share

Max Helskens > Max Helskens 17 days ago

I found the problem, apparently ionic wants you to put your new
files in a directory named 'assets/fonts'. Naming the file 'font' or
anything else won't work.

Thanks again for the great tutorial!

Reply Share

Yann Braga Mod > Max Helskens 17 days ago

Hey @Max Helskens, I'm really glad this was useful to
you, even more that you managed to solve your issue!
I'm not sure if having the folder is utterly necessary, but
I did structure my files using 'assets/fonts'.
Perhaps you followed the tutorial and didn't notice the
`url('../assets/fonts/icomoon.eot?39m2i2');` part, which
asked for the fonts to be within that folder?

Cheers!
Reply Share

Max Helskens > Yann Braga 17 days ago

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 9/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga

No, I definitely had all the correct paths.

I really think it should be assets/fonts since that
is what the ionicons use.
Anyway, it works perfectly now and I wanted to
leave the comment here for others stumbling
upon the same problem.
Reply Share

Jose Pena a month ago

Hello, this is exactly what I needed, but with Font Awesome. I was able
to make it work based on your work and can now use Font Awesome
icons as if they were Ionic icons. Thank you lots.
Reply Share

Sukumar Dhoni a month ago

simple and clear. Thanks!
Reply Share

Yann Braga Mod > Sukumar Dhoni a month ago

Thanks a lot, Sukumar!
Reply Share

Francesco Mussi a month ago

Great tutorial!
I am having an headache trying to style the custom inside an ion-list.
I don't know why - but it has by default a strange positioning inside the
list.
Will try to figure it out
Reply Share

Yann Braga Mod > Francesco Mussi a month ago

Hey @Francesco Mussi , thanks for trying this out. It may
happen because all default ion-icons have the same proportion
and are all square sized. When using custom icons, you also
have to make sure they are all square and proportional. Of
course you can use different shaped icons, but then it's up to you
to adjust the stylings accordingly.

If that wasn't the case, feel free to push a sample repo on github
then paste the link here, I'll gladly help you :)

Cheers!
Reply Share

Francesco Mussi > Yann Braga a month ago

Thanks for replying.
Yes, that was exactly the reason. Different proportions. I
managed anyway with some custom style, thanks!
1 Reply Share
https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 10/11
9/7/2017 How to use custom icons on Ionic 3 Yann Braga
Reply

Sergio Gandrus 2 months ago

Hi, i can't have custom icons working.
The first error i have is when i add

@import "../theme/icons";

i got this

http://prntscr.com/fx2kc9

so i must write

@import "../theme/icons.scss";

After that the custom icons still not appear

Reply Share

Dieter Woestemeier > Sergio Gandrus a month ago

Copyrights 2017 all rights reserved by Yann Braga

https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3/ 11/11