Add Custom Icon in Ionic 2

Question

I am using Ionic 2 for developing my App. I want to use my custom icons in my app like we use ionic 2 icons using tag. Eg:

<ion-icon name="my-custom-icon"></ion-icon>

How can i achieve this? Is there any recommended way to doing this?

Solution 1

If you want to use custom fonts in ionic 2+ you can do it with following.

Step 01:

• Have/create custom font SVG files using tools such as XD.
• Go to awesome online tool https://icomoon.io to generate font icons out of your SVG files. It's free tool and very good, I am using it for a while.
• Download your custom font file.
• Your file will look like something below.

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

replace above code with :

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
  @extend .ion;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

Step 02:

• We can use SASS @mixing for repetitive work

  @mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    content: $val;
    font-size: 26px;
  }
}

we can use our sass mixing in our sass file like :

@include makeIcon(icon-new-home, '\e911')

Step 03

Use it like

<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
 </ion-tabs>

and its even support android ripple effect, which kinda looks cool

[Updated] 30 Nov 2017

@ionic/app-scripts : 3.1.2
Ionic Framework    : ionic-angular 3.9.2

For Ionic 3.1.2

You need to add @import "ionicons"; inside your /src/theme/variables.scss file which will fix below error

"[class^="icon-"]" failed to @extend ".ion". The selector ".ion" was not found. Use "@extend .ion !optional" 
        if the extend should be able to fail. 

Solution 2

This is the easiest way I've found, from the forums at https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.

In your app.scss file, add the following code:

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="appname-customicon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

Then in your templates, you can use the following HTML to create the icon:

<ion-icon name="appname-customicon"></ion-icon>

This is far less complicated than using the font-based methods. As long as you're not adding hundreds of icons you should be okay with this method. However each image is sent as a separate request, where as with the font methods all the images are contained in one file, so it would be a little more efficient.

Solution 3

With the current Ionic 3.3.0 you can use the solution from Anjum, but you have to change

@import "ionic.ionicons";

to

@import "ionicons";

in the src/theme/variables.scss file.

Found this solution at:

https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss

Solution 4

Been trying to implement Anjum Nawab shaikh answer on top with the icons sass sheet from icomoon.

I have been able to get it working with version 2.2.2.

In the www/fonts of the project I had added the icomoon files:

icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss

In icomoon.scss I added the following scss:

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tclihz');
  src:  url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tclihz') format('truetype'),
    url('../fonts/icomoon.woff?tclihz') format('woff'),
    url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{

/* Didn't feel the need to @extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in 
www/assets/fonts/ionicons.scss */

  font-family: "Ionicons", "icomoon" !important; //So just add this
}

//Mixin
@mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    //important to overwrite ionic icons with your own icons
    content: $val !important; 
    font-size: 26px;
  }
}


//Adding Icons
@include makeIcon(email, '\e900');
...

Then I did an import to the variables.scss

@import "../www/fonts/icomoon";

Now we can add this to the html template:

<ion-icon name="email"></ion-icon>

Solution 5

Before starting : make sure that you have every svg file you need.

Now just go here : http://fontello.com/

That tool will generate your icon font and the CSS needed with. It is pretty intuitive, just use it, download, and copy your font wherever you want in your www folder but keep the same file structure. To finish, just integrate your CSS file in your index.html file and you're done!

I hope it will solve your issue! ;-)

View more solutions

Comments

[Luciano Fantuzzi]

"@extend .ion" is not working in Ionic 2.1.0 (compiler says it can't find .ion). I'm importing it in vairables.scss this way: @import "icomoon.scss"; and this file has the contents of your post. Am I doing something wrong here?

[Afeez Aziz]

I am also on ionic 2.1.0, CLI suggested to use !optional after @extend .ion but existing icons also do not show.

[Jonas Ostergaard]

For higher versions of ionic, have a look at the answer of Wolf, that fixed it for me.

[Gabriel]

This is actually the best solution for me! With like a dozen icons to make this was done in a breeze and is usable like the standard icons.

[NiRUS]

Perfect soln! may this needs some gitproject seperately

[Avram Virgil]

If you get an error search for import "ionic.ionicons"; and change it to import "ionicons";

[whatsthatitspat]

Setting the line height appears to mess up FABs. When a FAB is opened, the close (x) button shifts up. Anyone else see this?

[Gregordy]

It works perfectly but how do you keep the default SVG colors? In my case, my icons become black even if I get rid of every "color" attributes that set them to black. They still get overriden by, by?

[Ka Tech]

I was able to use this install custom fonts, but when I try to increase the fontsize it my app the icon size stays the same. Do you have this issue?

[Anjum....]

@KaTech you should be able to change font size using, CSS selector

[Eduardo Roth]

@Gregordy, if you want to keep original colors, change the word "mask" for "background".

[Gregordy]

@EduardoRoth Oh my gosh, thanks a million bro! I also changed "background" from currentColor to the one I want, as I was getting a black one. Feels so good that I now do not need to paste every "path" sub-element of my svg to make it work!

[vsync]

I fail to see how this helps in adding custom icon

[John]

I tried to apply this, but it doesn't work.. it does not display the icon at all.. I end up using img tag instead...