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

Ionic Framework ionic-v3
1

for now I can only use the default icon set from ionic, which is great, but I have some custom svg to display as tab icon. So can I display them directly as svg or I have to change them to a font ?

3 Likes
2

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

3

Hi there,

Does this mean we are not able to add custom icons yet for the entire app?

Thanks.

4

It’s pretty easy to do actually. When you set a tabIcon property, Ionic sets a class name on the tab, based on the name you provided. So for example, if you set tabIcon="customicon", then the resulting class names will be .ion-ios-hygglo-customicon and .ion-ios-hygglo-customicon-outline (for selected tabs) for iOS. On Android, the prefix will be .ion-md- instead of .ion-ios-.

Then just create a custom css, something like this:

.ion-ios-customicon,
.ion-md-customicon {
  content: url(../../assets/img/ui/customicon.svg);
  width: 24px;
  height: 32px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

And voilá! :slight_smile:

Edit: This goes for basically where ever you can use ion-icons, so you can customize whatever icon you want.

19 Likes
5

Nice job

I went for another solution by building and extending ionicons with my own svg files

but css approach seems easier as long as there’s only few icons need to be customised

here’s the long thread

6

I thought of building an icon set as well, but our icons got updated and changed so often so it was way easier so just reply the svg-file.

7

Yep, you get this right. The fonts’ way has another draw back, as I mentioned in the thread, if ionic get updated, it will be overwritten.

Thanks for the solution.

8

I found this method is useful when I have no need to change the color

one of the best part of font icon is you can change the font color easily

9

@mhartington looking at Beta 6 node_modules/ionicons/dist I have the feeling that it should be quite simple to add custom icons now. There seems to be a SVG file for each icon and somehow there must exist a build process. Anyhow something I am missing. As I see a lot of people struggling around with this problem, I would really appreciate if the Ionic team would provide a step by step tutorial. Thanks a lot!

10

I really don’t recommend modifying the ionicons in node_modules

It’s not just a svg for each icon, but there’s a font file as well. It’s much more involved than it seems.

I can look into doing a blog post about the subject

3 Likes
11

Thanks, yes some instructions for best practices are needed.

12

If you want to add font awesome icons to your tabbar here is my hack to do it:
(For adding generally the font-awesome package see this topic)

your-tabs.html -> just use some unknown tabIcon strings so that the <icon> will be put in the DOM

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="News" tabIcon="fa-bullhorn"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="Food" tabIcon="fa-cutlery"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Grades" tabIcon="fa-graduation-cap"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="Timetable" tabIcon="fa-calendar"></ion-tab>
</ion-tabs>

your-tabs.scss -> the scss rules:

// Hacks for font awesome icons in tabbar
// see https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/2
// the content code of each fa-icon can be found here: 'node_modules/font-awesome/css/font-awesome.css'
.fa-icons-general {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.ion-ios-fa-bullhorn::before,
.ion-ios-fa-bullhorn-outline::before,
.ion-md-fa-bullhorn::before {
    @extend .fa-icons-general;
    content: "\f0a1";
}

.ion-ios-fa-cutlery::before,
.ion-ios-fa-cutlery-outline::before,
.ion-md-fa-cutlery::before {
    @extend .fa-icons-general;
    content: "\f0f5";
}

.ion-ios-fa-graduation-cap::before,
.ion-ios-fa-graduation-cap-outline::before,
.ion-md-fa-graduation-cap::before {
    @extend .fa-icons-general;
    content: "\f19d";
}

.ion-ios-fa-calendar::before,
.ion-ios-fa-calendar-outline::before,
.ion-md-fa-calendar::before {
    @extend .fa-icons-general;
    content: "\f073";
}
9 Likes
13

Is there an issue / feature request open for this ? Can you please add the issue ? Thanks.

14

Hello @mhartington from Ionic Team!
I would like to confirm this issue. Is this feature still not available?
I would like to use custom icon fonts in my app but it’s not working when it is being run on an actual device. No icon is shown, all white spaces. Kindly confirm. Thanks! :slight_smile:

15

I am also having this issue. I created a custom svg and converted it into a font package with IcoMoon.

Then I added this line to my app.core.scss file @import "../../fonts/customfont/style.css"; and copied the font package into the www folder. I call the icon like this: <i class="bulb"></i>. It shows correctly in browser with ionic serve but when I run my app on a device I get a empty box with an X in it. This is the only thing I have outstanding before releasing my app. Am I doing something wrong? I am not interested in putting it in tabbars. I just want it to show in a button.

Thanks for any help.

16

This is still currently not possible ATM.

What you can do instead is when you create your own icons, make sure you include classes that are prefixed with ios-, md-, and wp-. This will load your own icons but still work within the ion-icons restrictions

17

To enhance your code, you can do multiple extends. It will avoid you to search the content. And in case there updates of font-awesome who change icons code content, we will be safe:

.ion-ios-fa-calendar-outline::before,
.ion-md-fa-calendar::before {
    @extend .fa-icons-general;
    @extend .fa-calendar:before;
}
```
18

Would be interested to see a post about doing this. I’m building an app for a client who has strong branding and would like custom icons.

1 Like
20

Thanks for pointing that out. You’re a life saver.
:raised_hands: Praise be unto you!

21

Ahh, found that we need to apply the outline too:

.ion-ios-MYICON,
.ion-ios-MYICON-outline,
.ion-md-MYICON {
  content: url(../../images/MYICON.png);
  width: 24px;
  height: 32px;
  padding: 6px 4px 2px;
  margin: 5px;
  opacity: 0.9;
}
4 Likes