Anyway to custom the tabbar's icon with my own svg file?


@Corin Ideally the outline class would be a different icon or at least a different color version of the same icon. That is what is shown when the tab is not active.


Yes, thank you @brayhoward! :smiley:


This is no longer working with RC0. Any idea how to show svg icons in the tabbar ?


I need the same feature in RC 0


I would definitely like this feature.


It still works for me in RC0.

I am using SVG icons. I have one SVG file with my icons for my entire app, but to use the CSS class override for the tabs like mentioned here, I had to inject the CSS fragment for each of the tab icons directly in my CSS/SCSS.

In my case, I am only worried about the MD classes, so I only override .ion-md-MYICON:


.ion-md-MYICON {
    background: url('data:image/svg+xml;base64,...YOUR ICON ENCODED HERE...') 50% 50% no-repeat;

with the ion-tab like this:


<ion-tab [root]="rootPage" tabIcon="MYICON"></ion-tab>

Hopefully, at some point in the future, I’ll be able to change the CSS to point to the SVG map file, but this doesn’t work yet:

DO NOT USE (YET) :warning:

.ion-md-MYICON {
    background: url('/assets/icon/iconfile.svg#MYICON') 50% 50% no-repeat;


Correct. Thanks for this. I am modifying the tab icons the same way you are.

My root problem was that I had my css in my global.scss file but that file is not being compiled in rc0. So I had to explicitly add it to variable.scss for it to be compiled:

@import "./global";

Thanks though this should help whoever is trying to override the tab icons.


for some reason .ion-md-customicon-outline is not working for me.
Its working with “ios” though, has something changed ?


Okay for md I did it like this.
.ion-md-customMatches { content: url("../../assets/icons/icon-matches.png"); min-width: 1.1em !important; min-height: 1.1em !important; } .tabs-md .tab-button[aria-selected=true] { .ion-md-customMatches { content: url("../../assets/icons/icon-matches.png"); } }


By accident I came across tthis post. I also need to use my own SVG…


when I build the app on the device custom icons made in css are empty rectangles.
Do you know how I can fix this?


Hi anz120,

you are using wrong path make it correct


It works for me, thank you very much.


Do you know also how to create an active and non-active icon for tabs and other components?


I came up with a new way to use custom SVG icons with ion-icons that maintains the flexibility to apply different colors with CSS color. With CSS masks!

First, I make sure I define all my icons with a special prefix in HTML like so

<ion-icon name="appname-customicon"></ion-icon>

Then I add this to my app.scss

// Custom icons
// Overriding the ion-icon behavior
// All custom icons will start with "appname-" prefix
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);

Basically what I’m doing is for all ion-icon elements with a class that contains “appname-”, define the background color to be what the foreground color to be. Then I’m setting a CSS mask to essentially mask the background with my custom icon SVG.

Because there won’t be any content, I need to manually set the size to be a square the size of an font em.

I can then define as many custom icons as I wish by simply adding a new rule. I just have to be careful not to have any rules that are subsets of another since I have to use the CSS attribute value ANY selector.

You can also define a different SVG for the “outline” version by adding a new rule.


Nice approach, but is it also possible to distinguish between iOS and android specific icons? I did not manage it…


I’m using a method based on this post, for instance:

.ion-md-ratio {
  content: url(../assets/icons/ratio.svg);
  padding: 2px 0px 3px;
  // opacity: 0.9;
  width: 24px;
  height: 32px;

.ion-md-ratio-outline {
  content: url(../assets/icons/ratio-outline.svg);
  padding: 2px 0px 3px;
  // opacity: 0.9;
  width: 24px;
  height: 32px;

The only platform where it doesn’t work is Firefox. I just get empty buttons. I’m preparing to publish my App on the web as well.

I’ve been looking with the inspector, but I can’t find anything wrong. Anyone know how to fix it?


Works great @longzheng!


Works great with Ionic’s current version. Thank you for sharing this approach!


Thanks, this works. But do you know how to set the color of the icon? (Selected/Unselected).