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?

Answer 1

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.