Add Custom Icon in Ionic 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.
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.