How to use custom icons with tabs (0.9.26)

demo
1

Just figured out how to use my own icons in tabs so I though I share it here.
It’s a simple two step process.

1: On the ion-tab directive I’ve set the CSS class to use via icon-on/icon-off.

<ion-tab title="McFly" icon-on="mcfly" icon-off="mcfly">

2: In my CSS I specify a new class with a background image.

.tabs .tab-item .icon.mcfly {
  background-repeat: no-repeat;
  background-position: 50%;
  height: 100%;
  background-image: url('https://raw.github.com/driftyco/ionic-site/gh-pages/img/docs/mcfly.jpg');
  background-size:contain;
}

That’s it. Here’s the whole example as codepen.

22 Likes
2

Nice @gbox . Thanks for sharing.

3

Thanks for this. It would be nice to see an example with labels as well.

4

I also had need to implement custom icons for Tabs, at client request.
Its not too bad.
In the ion-tab just add an “icon”

  <ion-tab title="Football" icon="feetball"  ...

Then in your CSS define the icon you pointed to:

.feetball {
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../img/feetball.png');
}

My feetball.png was a 48x48 transparent PNG image.

2 Likes
5

Hi All,
I also using same code.But, There is a issue with Android Micromax and HTC. Image icon is displaying blur. Is there any solution ??

6

Hi all,

i’m using this solution for my app. but i want change img-link with a value from angularjs

background-image: url('https://raw.github.com/driftyco/ionic-site/gh-pages/img/docs/mcfly.jpg');

to

background-image: url({{link-img}});

welcome any solution for it.

7

Just wanted to add the solution if you want tab names and icons as well as what ever pixel size on the icon as you wish. Add this to your css:

height: 70%;
background-size: contain;

It will scale down the icons so your not limited to the default 30-ish pixel size (which becomes blurry on the iPad).

8

Hey @gbox , thanks for the tip it is very good for a static picture. What if I want to use a picture URL that is found in the scope level. Say a user logs in with facebook and I want his photo to be the icon of the tab such as: $scope.user.picture. Any idea?

Thanks

9

Also wondering how to use dynamic value (i.e. from $scope) to change the icon’s background-image. I think this is likely a .directive but anyone with suggested code would be much appreciated.

10

so it appears you can actually have more than one CSS class in icon-on/icon-off
it also appears that height: 100% is overriden by ionic’s .tab-item .icon

Here’s what I did (SCSS)

.my-icon {
  background-repeat: no-repeat;
  background-position: 50%;
  .my-search-inactive {
      background-image: url('../img/my-search-inactive.svg');
      background-size: 21px; // square icon
  }
  .my-search-active {
      background-image: url('../img/my-search-active.svg');
      background-size: 21px; // square icon
  }
}

use background-position: 50% X to offset your icon vertically
use background-size: Xpx/% Ypx/% for non-square icons

11

I really love people who sharing great ideas with others “just like that”. You rock, thanks!

12

Hi,
I wanted to include material icons in my ionic project, and of course also in my ionTabs.
Material icons must be used like this

<i class="material-icons">history</i>

So I used a decorator for the IonTabNavDirective:

.config(function($stateProvider, $urlRouterProvider, $provide) {


    $provide.decorator('ionTabNavDirective', function($delegate) {
      var directive = $delegate[0];
      directive.template =       '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
      ' ng-disabled="disabled()" class="tab-item">' +
      '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
      '<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()">{{materialContent}}</i>' +
      '<i class="icon {{getIconOff()}}" ng-if="getIconOff() && !isTabActive()">{{materialContent}}</i>' +
      '<span class="tab-title" ng-bind-html="title"></span>' +
      '</a>';

      var link = directive.link;

      directive.compile = function() {
        return function(scope, element, attrs) {
          var materialSetupIconsOn = attrs.iconOn.split('[');
          if(materialSetupIconsOn) {
            scope.iconOn = materialSetupIconsOn[0];
            scope.materialContent = materialSetupIconsOn[1].split(']')[0];
          }

          var materialSetupIconsOff = attrs.iconOff.split('[');
          if(materialSetupIconsOff) {
            scope.iconOff = materialSetupIconsOff[0];
            scope.materialContent = materialSetupIconsOff[1].split(']')[0];
          }

          link.apply(this, arguments);

        };
      };
      return $delegate;
    });

And used the directive in my html like this:

<!-- Account Tab -->
  <ion-tab title="Account" icon-off="material-icons material-icons[account_circle]" icon-on="material-icons material-icons[account_circle]" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

Of course it’s a quick workaround and needs some improvements, I just wanted to share the concept and ask the community: what to you think?

13

How to customize icon of tag i, example i want customize i con of :slightly_smiling:
<div class="item item-icon-left layout1" ng-click="gotoS('tab.promotion')" ng-if="$root.tabConfig.tabPromotion"> <i class="icon homeIcon"></i> {{$root.themeConfig.titleOfPromotion}} </div>

i use:

.homeIcon {
        background-repeat: no-repeat;        background-size: 24px 24px !important;
        background-position: 50% 50% !important;
        height: 100%;
        background-image: url("{{$root.tabConfig.tabNews.iconSrc}}");
        background-size:contain;
        width: 30px;
        height: 30px;
    }

but nothing happen , pls help me

15

Hi. thanks for the post. i have used it and its working fine. But in some cases the icons are appearing multiple times. The icon is displayed below the same icon in tab bar. can u help me to sort out the issue.?

16

Hi guys I was unable to get this to work as specified above with the current ionic (ionic@3.6.0 ) I was however able to apply some of the logic and high-jack an existing icon with the below css inserted into app.scss

.ion-md-flame {
  background-repeat: no-repeat;
  background-position:center;
  background-image: url('../assets/icon/wd_sun_icon.png');
  height: 100%;
  background-size:contain;
  color: rgba(60, 60, 60, 0)!important;//We are using this to defeat the flame icon and just show wd_sun_icon.png
}
17

unable to use in my app , Please help. I am usinga app.scss file as css. rest are the same.
ionic version:-3.19.1

18

humm for me i think the best way is to add on icon name a special name
example mobicon-delivery
on css part of the page
iOS:`

.ion-ios-mobicon-delivery::before{
  font-family: "application-icon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\50";
}
.ion-ios-mobicon-delivery-outline::before{
  font-family: "application-icon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\50";
}

Android :

.ion-md-mobicon-delivery-outline::before{
  font-family: "application-icon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\50";

}
.ion-md-mobicon-delivery::before{
  font-family: "application-icon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    content: "\50";
}`

image
image
and it will work :slight_smile:

19

See: https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/

image
image.jpg1080×1920 478 KB

20

I personally use Nova Launcher for my android device and it’s best <3

21

Ionic is a powerful and powerful framework that facilitates the creation of mobile and scalable web applications with web technologies. It comes with many features and tools that can make development easy and convenient. One of the features that I like about this is Ionicons, a set of completely open code icons with more than 700 icons designed for web, iOS, Android and desktop applications.

This is great and most of the time you can find the right icon in your application, especially because this icon set was created specifically for this framework and includes icons for the Material Design and iOS versions. But the designers are always inspired and they give you icons that you can not find in the standard package. So it was the same for me during the development. I looked for a solution in the ionic forum and my proposal was to create new sources, new icon packages and other solutions that consume a lot of time. In this article, I present a simple and easy way to create custom icons for your application that can be used for buttons, tabs or other components without altering the format and other guidelines.