I use ion-tabs in my App and I want to use an picture in a tab-button. I want to set this picture dynamicly.

In my case, I have an account with different users linked to it. I want to change my tab picture depending of the selected user.

I have this :

And i want this :

My code in my tabs :

    <ion-tabs tabsHighlight="false">
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
    </ion-tabs>

I don't know how to do that, an idea ?

I use ion-tabs in my App and I want to use an picture in a tab-button. I want to set this picture dynamicly.

In my case, I have an account with different users linked to it. I want to change my tab picture depending of the selected user.

I have this :

And i want this :

My code in my tabs :

    <ion-tabs tabsHighlight="false">
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
    </ion-tabs>

I don't know how to do that, an idea ?

• javascript
• angular
• tabs
• ionic2

• Please post some code that demonstrates what you tried. – Günter Zöchbauer Commented Feb 22, 2017 at 8:55
• I changed my post. I don't know what do you need to understand better what I want to do ? – V. Pivet Commented Feb 22, 2017 at 9:04

3 Answers 3

give custom name to tabIcon like

<ion-tab [root]="MenuPage"
       tabsHideOnSubPages="true"
       tabIcon="customicon"
       tabTitle="Menu">
</ion-tab>

and in css:

.ion-ios-customicon-outline,
.ion-ios-customicon,.ion-md-customicon,.ion-md-customicon-outline {
  content: url('imageurl');
}

plunk

Finally I find a solution ! I just write in the created DOM.

I do like this :

updateAccountTab() : void {
      let array = document.getElementsByClassName('tabbar');
      let tabbar = array[0];
      let element = tabbar.childNodes[tabbar.childElementCount-1];
      if(element) {
          element.removeChild(element.childNodes[1]);
          let img = document.createElement("img");
          img.setAttribute("class", "tab-icon-custom tab-button-icon icon icon-md");
          img.setAttribute("src", this.pdata.user.profile_thumbnail);
          element.insertBefore(img, element.childNodes[1]);
      }
  }

In Your html :

<ion-tabs tabsHighlight="false" #myTab>
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
</ion-tabs>

In your ponent (ts) file :

import { ViewChild } from '@angular/core';
import {Tabs} from 'ionic-angular';
export class TabsPage {

  @ViewChild('myTab') tabRef: Tabs;
  constructor(public navCtrl: NavController) {

  }
  ngAfterViewInit() {
    let tabbar = this.tabRef._tabbar.nativeElement;
    let element = tabbar.childNodes[tabbar.childElementCount-1];
    if(element) {
      element.removeChild(element.childNodes[1]);
      let img = document.createElement("img");
      img.setAttribute("class", "tab-icon-custom");
      img.setAttribute("src", 'https://picsum.photos/200');
      element.insertBefore(img, element.childNodes[1]);
    }

  }
}

In your scss file :

.tab-icon-custom {
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
    width: 50px;
    border-radius: 50%;
 }