在tabs.html中

<ion-tabs tabsPlacement="bottom">
  <ion-tab [root]="tab1Root" tabTitle="tab1" tabIcon="tab-tab1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tab2" tabIcon="tab-tab2"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="tab3" tabIcon="tab-tab3"></ion-tab>
</ion-tabs>
 

.ion-tab-icon-base {
  width: 32px;
  height: 32px;
  padding: 4px 4px 2px;
}

.ion-tab-icon-md-base {
  min-width: 0 !important;
  height: 32px;
}

$tabImageName: 'tab1' 'tab2' 'tab3';
@for $i from 1 to 4 {
  //for ios
  .ion-ios-tab-#{nth($tabImageName, $i)} {
    @extend .ion-tab-icon-base;
    content: url("../assets/images/tabs/#{nth($tabImageName, $i)}_choosed.png");
  }
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
    @extend .ion-tab-icon-base;
    content: url("../assets/images/tabs/#{nth($tabImageName, $i)}.png");
  }

  // for android
  .tabs-md .tab-button[aria-selected=true] {
    .ion-md-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-md-base;
      content: url("../assets/images/tabs/#{nth($tabImageName, $i)}_choosed.png");
    }
  }
  .tabs-md .tab-button[aria-selected=false] {
    .ion-md-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-md-base;
      content: url("../assets/images/tabs/#{nth($tabImageName, $i)}.png");
    }
  }
}
 

android則需要設定.tabs-md .tab-button下不同屬性的.ion-md-tab-tabX

其中，tabX表示tab1，tab2，tab3等，具體的名字根據自己喜好。

編譯生成的css如下

.ion-ios-tab-tab1 {
  content: url("../assets/images/tabs/tab1_choosed.png");
}

.ion-ios-tab-tab1-outline {
  content: url("../assets/images/tabs/tab1.png");
}

.tabs-md .tab-button[aria-selected=true] .ion-md-tab-tab1 {
  content: url("../assets/images/tabs/tab1_choosed.png");
}

.tabs-md .tab-button[aria-selected=false] .ion-md-tab-tab1 {
  content: url("../assets/images/tabs/tab1.png");
}
 

如果親們有更好的方法可以告知，謝謝！