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

Ionic Framework ionic-v3
22

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

23

Yes, thank you @brayhoward! :smiley:

24

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

25

I need the same feature in RC 0

1 Like
26

I would definitely like this feature.

27

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
28

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.

29

Hey,
for some reason .ion-md-customicon-outline is not working for me.
Its working with ā€œiosā€ though, has something changed ?

30

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
31

By accident I came across tthis post. I also need to use my own SVGā€¦

32

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
33

Hi anz120,

you are using wrong path make it correct

1 Like
34

It works for me, thank you very much.

35

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

36

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
37

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

1 Like
39

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
40

Works great @longzheng!

41

Works great with Ionicā€™s current version. Thank you for sharing this approach!

42

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

1 Like