Ionic自定义tabbar图标

ionic tabbar 可以使用ionic自带的图标，但是往往我们需要设置成自己ui给的图标。
在assets文件夹下可以创建一个空文件夹来存放图标，也可以放在icon文件夹中，
然后在tabs.scss或者app.scss中加入以下代码：

.ion-page {
  .ion-tab-icon-base {
    width: 32px !important;
    height: 32px !important;
    padding: 4px 4px 2px;
  }
  .ion-tab-icon-md-base {
    width: 32px !important;
    min-width: 0 !important;
    height: 32px;
  }
  $tabImageName: 'home' 'address' 'my';
  @for $i from 1 to 4 {
    //for ios
    .ion-ios-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-base;
      content: url("../../assets/icon/#{nth($tabImageName, $i)}_fill.svg"); //IOS下被激活的图标
    }
    .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
      @extend .ion-tab-icon-base;
      content: url("../../assets/icon/#{nth($tabImageName, $i)}.svg"); //IOS下未被激活的图标
    }
     // for android
    .tabs-md {
      .tab-button[aria-selected=true] {
        .ion-md-tab-#{nth($tabImageName, $i)} {
          @extend .ion-tab-icon-md-base;
          content: url("../../assets/icon/#{nth($tabImageName, $i)}_fill.svg") !important;
        }
        //这里自定义 android tabbar被激活的文字颜色
        .tab-button-text{
          color: #06c1aE;
        }
      }
    }
    .tabs-md .tab-button[aria-selected=false] {
      .ion-md-tab-#{nth($tabImageName, $i)} {
        @extend .ion-tab-icon-md-base;
        content: url("../../assets/icon/#{nth($tabImageName, $i)}.svg") !important;
      }

    }
  }
  .ion-ios-tab-task,
  .ion-ios-tab-task-outline,
  .ion-ios-tab-master,
  .ion-ios-tab-master-outline {
    width: 32px !important;
    height: 32px !important;
  }
}
//这里自定义 ios tabbar被激活的文字颜色
.tabs-ios .tab-button:hover:not(.disable-hover), .tabs-ios .tab-button[aria-selected=true]{
    color: #06c1aE;
}

这里图片推荐选用svg格式，因为不会因放大而失真，另外图标的文件名需要和$tabImageName数组中的保持一致，利用sass的for循环逐一取出数组中的图片，有效避免书写大量重复的代码。
以下是我的图片的命名（命名的格式对于for循环极其重要）。

下面是自定义后的Tabbar图标：

当然，不止可以使用图片，.png .svg ，也可以使用字体图标。
后续发现问题再补充。