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?

score 70 · Answer 1 · answered Jun 15 '17 at 19:02

70

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.

answered Jun 15 '17 at 19:02

adjwilli

9,658
4
35
29

3

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. – Gabriel Aug 08 '17 at 23:10
3

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? – Gregordy Dec 17 '17 at 00:20
2

@Gregordy, if you want to keep original colors, change the word "mask" for "background". – Eduardo Roth Jul 12 '18 at 15:20
@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! – Gregordy Jul 17 '18 at 08:21
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... – Dan Sep 03 '18 at 15:11

score 69 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

"@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? — Luciano Fantuzzi, Mar 07 '17 at 23:27
I am also on ionic 2.1.0, CLI suggested to use !optional after @extend .ion but existing icons also do not show. — Afeez Aziz, Mar 28 '17 at 14:00
For higher versions of ionic, have a look at the answer of Wolf, that fixed it for me. — Jonas Ostergaard, Jun 19 '17 at 10:59
If you get an error search for import "ionic.ionicons"; and change it to import "ionicons"; — Avram Virgil, Aug 24 '17 at 08:40
Setting the line height appears to mess up FABs. When a FAB is opened, the close (x) button shifts up. Anyone else see this? — whatsthatitspat, Nov 26 '17 at 17:39
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? — Ka Tech, Dec 21 '17 at 06:10
@KaTech you should be able to change font size using, CSS selector — Anjum...., Dec 21 '17 at 06:12

score 9 · Answer 3 · answered Jun 09 '17 at 09:43

9

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

answered Jun 09 '17 at 09:43

Wolf

143
2
4

I fail to see how this helps in adding **custom** icon – vsync Jul 22 '18 at 15:20

score 6 · Answer 4 · edited May 23 '17 at 12:18

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>

score 4 · Answer 5 · answered Aug 11 '16 at 08:03

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

score 3 · Answer 6 · answered Aug 31 '16 at 14:08

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.

score 3 · Answer 7 · answered Nov 28 '16 at 21:30

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>

score 1 · Answer 8 · answered Apr 04 '17 at 08:46

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

score 0 · Answer 9 · answered Aug 08 '18 at 18:42

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>

score 0 · Answer 10 · answered Oct 26 '18 at 16:30

0

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>

answered Oct 26 '18 at 16:30

sanuj

66
5

score 0 · Answer 11 · answered Jun 29 '21 at 06:31

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

Add Custom Icon in Ionic 2

11 Answers11

[Updated] 30 Nov 2017

Linked