How to use custom icons with tabs (0.9.26)


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


How to use image replace icon tab
How to Change default content image id to custom image
#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.


#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


Ion-tab icon with custom img
#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/