ionic2 tab使用自定义图标

在chrome浏览器调试中审查元素发现
ionic2里面的图标是通过类添加的

比如说   tabIcon="homeImg"
在页面中研究可以看到在ios上有两个类是
　
.ion-ios-homeImg   和  .ion-ios-homeImg-outline

第一个是选中的状态，第二个是未选中的状态

而在android上只有一个类　.ion-md-homeImg
选中未选中都是这一个

但是我们可以通过手动添加 .ion-md-homeImg-outline 这个类
在tabs.ts里面创建一个数组用于放置 我们需要的三个tab，
之后写一个Android添加-outline词缀的方法

public test: Array<any> = ['homeImg','clubImg','mineImg']; constructor(private platform:Platform) {

  }

  change(a: number) {    if (this.platform.is("android")) {      for (let i = 0; i < this.test.length; i++) {        if (i === a) {          this.test[i] = this.test[i].split("-")[0];
        } else {          this.test[i] = this.test[i].split("-")[0] + "-outline";
        }
      }
    }
  }

之后我们就可以在这个类上用黑科技(当然没有homeImg这个图标这是我自定义的)

方法:
在app.scss 中做一个全局的图标 可以在任意地方使用

.ion-ios-homeImg:before{  content: '';  width: 30px;  height: 30px;  display: block;  background: no-repeat url('http://www.baidu.com/selection.png');
}.ion-ios-homeImg-outline{  content: '';  width: 30px;  height: 30px;  display: block;  background: no-repeat url('http://www.baidu.com/unselection.png');
}.ion-md-homeImg:before{  content: '';  width: 30px;  height: 30px;  display: block;  background: no-repeat url('http://www.baidu.com/selection.png');
}.ion-md-homeImg-outline{  content: '';  width: 30px;  height: 30px;  display: block;  background: no-repeat url('http://www.baidu.com/unselection.png');
}

这里需要注意一点是selection.png必须使用网络图片，不能够识别本地图片

使用时使用ng2的双向数据绑定，
并且用ionSelect绑定change方法
<ion-tab [root]="tab1Root" (ionSelect)=change(0) [tabsHideOnSubPages]="true" tabTitle="首页" tabIcon="{{test[0]}}"></ion-tab>

效果如下图

------end------

作者：Jarvan丶
链接：https://www.jianshu.com/p/aa6fe2be3241