解决android中icon只能使用一张icon的问题

.html 中 绑定 ionselect的方法，tabicon使用变量

< ion-tabs>

< ion-tab [ root]= "tab1Root" ( ionSelect)= "change(0)" [ tabTitle]= "tab1Title" tabIcon= "{{wenzhen}}"></ ion-tab>

< ion-tab [ root]= "tab2Root" ( ionSelect)= "change(1)" [ tabTitle]= "tab2Title" tabIcon= "{{huanzhe}}"></ ion-tab>

< ion-tab [ root]= "tab3Root" ( ionSelect)= "change(2)" [ tabTitle]= "tab3Title" tabIcon= "{{wode}}"></ ion-tab>

</ ion-tabs>

.ts 中

import { Component } from '@angular/core';

import { TranslateService } from '@ngx-translate/core';

import { IonicPage, NavController, Platform } from 'ionic-angular';

import { Tab1Root } from '../pages';

import { Tab2Root } from '../pages';

import { Tab3Root } from '../pages';

@ IonicPage()

@ Component({

selector: 'page-tabs',

templateUrl: 'tabs.html'

})

export class TabsPage {

tab1Root : any = Tab1Root;

tab2Root : any = Tab2Root;

tab3Root : any = Tab3Root;

tab1Title = " ";

tab2Title = " ";

tab3Title = " ";

wenzhen = "wenzhen";

huanzhe = "huanzhe";

wode = "wode";

constructor( public navCtrl : NavController, public translateService : TranslateService, public platform : Platform) {

translateService. get([ 'TAB1_TITLE', 'TAB2_TITLE', 'TAB3_TITLE']). subscribe( values => {

this.tab1Title = values[ 'TAB1_TITLE'];

this.tab2Title = values[ 'TAB2_TITLE'];

this.tab3Title = values[ 'TAB3_TITLE'];

});

}

change( a : number) {

if ( this.platform. is( "android")) {

if(a == 0){

this.wenzhen = "wenzhenandroid";

this.huanzhe = "huanzhe";

this.wode = "wode";

} else if(a == 1){

this.wenzhen = "wenzhen";

this.huanzhe = "huanzheandroid";

this.wode = "wode";

} else if(a == 2){

this.wenzhen = "wenzhen";

this.huanzhe = "huanzhe";

this.wode = "wodeandroid";

}

}

}

}

自定义css icon

.ion-ios-wenzhen:before {

@include font-size-custom;

background: no-repeat url( '../assets/imgs/wenzhenbefore.png');

}

.ion-ios-wenzhen-outline {

@include font-size-custom;

background: no-repeat url( '../assets/imgs/wenzhen.png');

}

.ion-md-wenzhen {

@include font-size-custom;

background: no-repeat url( '../assets/imgs/wenzhen.png');

}

.ion-md-wenzhenandroid:before {

@include font-size-custom;

background: no-repeat url( '../assets/imgs/wenzhenbefore.png');

}