Ionic 2: Sử dụng hình ảnh trong nút tab

Question

Tôi sử dụng các tab ion trong ứng dụng của mình và tôi muốn sử dụng hình ảnh trong một nút tab. Tôi muốn đặt ảnh động này.

Trong trường hợp của tôi, tôi có một tài khoản với những người dùng khác nhau được liên kết với nó. Tôi muốn thay đổi ảnh tab của mình tùy thuộc vào người dùng đã chọn.

Tôi có điều này:

Và tôi muốn điều này:

Mã của tôi trong các tab của tôi:

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

Tôi không biết làm thế nào để làm điều đó, một ý tưởng?

Answer 1

Cuối cùng tôi tìm thấy một giải pháp! Tôi chỉ viết trong DOM được tạo.

tôi làm như thế này:

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

Answer 2

cho biết tên tùy chỉnh để tabIcon như

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

và trong css:

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

plunk