Ионный 2: использование изображения в кнопке табуляции

Я использую ионные вкладки в своем приложении, и я хочу использовать картинку в закладке. Я хочу динамически установить эту картинку.

В моем случае у меня есть учетная запись с разными пользователями, связанными с ней. Я хочу изменить изображение вкладки в зависимости от выбранного пользователя.

У меня есть это:

И я хочу это:

Мой код в моих вкладках:

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

Я не знаю, как это сделать, идея?

Ответ 1

Наконец, я нахожу решение! Я просто пишу в созданном DOM.

Мне нравится следующее:

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]);
      }
  }

Ответ 2

предоставить настраиваемое имя tabIcon как

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

и в css:

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

plunk