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:

Answer 1

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

Answer 2

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>

Answer 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

Answer 4

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>