Add Custom Icon in Ionic 2

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?

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.

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. 

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

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>

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! ;-)

According to ionic team:

Hey there! Right now it's limited to using ionicons, since underneath it's rendering an ion-icon, and thats handling the platform differences. You could open an issue and we could discuss adding this feature there

You can see all answers in here:

https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16

I also find this:

https://www.npmjs.com/package/ionic2-custom-icons ,

but do not seems a clever solution (I prefer to wait for a solution of Ionic team).

The best scenario for this is use old way, by creating a class on a scss file.

For add custom icons I use in my scss file:

.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
  @extend .ion;
}

.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
  content: 'your-custom-image';
}

Then in your HTML code:

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

I think this step-by-step by GerritErpenstein is very intuitive, it works pretty good for me. My Ionic version is 2.2.2. Literally, you use a sentence like this and it's done:

<custom-icon set="star" name="iconostar"></custom-icon>

https://github.com/GerritErpenstein/ionic2-custom-icons

Create Icon
ion-icon {
        &[class*="custom-"] {
          mask-size: contain;
          mask-position: 50% 50%;
          mask-repeat: no-repeat;
          background: currentColor;
          width: 0.8em;
          height: 0.8em;
        }
      
        &[class*="custom-rupee"] {
          color: yellow;
          mask-image: url(../../assets/Images/rupee.svg);
        }
        &[class*="custom-ballon"] {
          mask-image: url(../../assets/ballon.svg);
        }
        &[class*="custom-mouse"] {
          mask-image: url(../../assets/mouse.svg);
        }
      
      }
 And to use them
&lt;ion-icon name="custom-rupee"></ion-icon>
&lt;ion-icon name="custom-mouse"></ion-icon>
&lt;ion-icon name="custom-ballon"></ion-icon>

If ionic way is not working for you, you can work with the angular way. Use this package: https://www.npmjs.com/package/angular-svg-icon.

Sample Code for ionic usage:

<svg-icon src="/assets/icons/activity.svg"></svg-icon>

Following is the recommended way to display external svg icons using ion-icon:

> To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

<ion-icon src="assets/icons/custom_icon.svg"></ion-icon>

Reference: https://ionic.io/ionicons/usage