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

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:

USE THIS :ok:

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

with the ion-tab like this:

USE THIS :ok:

<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;
}
2 Likes

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.

Hey,
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"); } }

1 Like

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?

1 Like

Hi anz120,

you are using wrong path make it correct

1 Like

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.

22 Likes

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

1 Like

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

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

.ion-ios-ratio-outline,
.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?

4 Likes

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).

1 Like

Hi,
i want to add custom font icons to my ionic2 project please any one can help me on this.

How can you set the icon size when using it? Font-size does not seem to anything for these.

You should be able to do

width:2em;
height:2em;
3 Likes

The best tutorial I’ve successfully followed is here:

at the end of the tutorial there is a github link to download the sourcecode…

3 Likes