Ionic3 自定义tabs菜单图标

tabs.scss

 .ion-tab-icon-base {
        width: 30px !important;
        height: 30px !important;
    }
    .ion-tab-icon-md-base {
        min-width: 0 !important;
        height: 30px;
    }
    
    $tabImageName: 'model' 'shop' ;  
    @for $i from 1 to 3 {
        //for ios
        .ion-ios-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-base;
            content: url("../../assets/images/tabs/icon_#{nth($tabImageName, $i)}_on.png");
        }
        .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
            @extend .ion-tab-icon-base;
            content: url("../../assets/images/tabs/icon_#{nth($tabImageName, $i)}_off.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/icon_#{nth($tabImageName, $i)}_on.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/icon_#{nth($tabImageName, $i)}_off.png");
            }
        }
    }

//图标文字样式可以自行调整

使用了scss的语法，定义$tabImageName: 'model' 'shop' ；数组，然后循环，通过#{nth($tabImageName, $i)} 取出循环的每个元素，定义每个图标的样式，这个就是scss预编译样式的好处，省去重复的工作和重复的代码。

从样式代码可以看出，定义了两份代码，一份是ios的ion-ios-前缀，一份是android版本的ion-md-与.tabs-md前缀，还有这个是ionic对不同平台有不同的样式，如果了解一看就明白了。-outline为ios未选中样式，[aria-selected=false]为android未选中样式。

tabs.html

<ion-tabs #myTabs>
       
    <ion-tab [root]="modelRoot" tabTitle="比价" tabIcon="tab-model"></ion-tab>
    <ion-tab [root]="shopRoot" tabTitle="直营店" tabIcon="tab-shop"></ion-tab>
    <ion-tab [root]="homeRoot" tabTitle="首页" tabIcon="home"></ion-tab> <!-- ionic自带的 -->

</ion-tabs>

图标存放地址assets/images/tabs

效果图