Ionic Custom Ion-tabs icon

There are many vector icons built into the ionic framework, which can be applied to ion-tabs multi-label switching.
Use the following:

<Ion-tabsclass= "Tabs-positive tabs-icon-only">  <Ion-tabtitle= "Home"icon-on= "Ion-ios7-filing"Icon-off= "Ion-ios7-filing-outline">    <!--Label 1 content -  </Ion-tab>  <Ion-tabtitle= "about"icon-on= "Ion-ios7-clock"Icon-off= "Ion-ios7-clock-outline">    <!--Label 2 content -  </Ion-tab>  <Ion-tabtitle= "Settings"icon-on= "Ion-ios7-gear"Icon-off= "Ion-ios7-gear-outline">    <!--Label 3 content -  </Ion-tab></Ion-tabs>

Corresponding effect:

It's not beautiful! Is there any way to personalize the tabs tag icon? For example: Complex method can search "Ionic custom Icon". The easy way is to borrow the Ion-tab template directly, "icon-on" and "Icon-off" with a custom class instead of the ion-* icon series:

<Ion-tabsclass= "Tabs-icon-top Tool-bar"Ng-class= "{' Tabs-item-hide ': hidetabs}">    <Ion-tabtitle= "Promotion"icon= "Bar-home-on"icon-on= "Bar-home-on"Icon-off= "Bar-home-off"href= "#/home"> <Ion-nav-viewname= "Home-tab"></Ion-nav-view> </Ion-tab>     <Ion-tabtitle= "Revenue"icon-on= "Bar-money-on"Icon-off= "Bar-money-off"href= "#/money"> <Ion-nav-viewname= "Money-tab" /> </Ion-tab>     <Ion-tabtitle=""icon-on= "Bar-service-on"Icon-off= "Bar-service-off"href= "#/service"> <Ion-nav-viewname= "Message-tab" /> </Ion-tab>     <Ion-tabtitle= "message"icon-on= "Bar-msg-on"Icon-off= "Bar-msg-off"href= "#/message"> <Ion-nav-viewname= "Message-tab" /> </Ion-tab>     <Ion-tabtitle= "my"icon-on= "Bar-mine-on"Icon-off= "Bar-mine-off"href= "#/user"> <Ion-nav-viewname= "User-tab" /> </Ion-tab> </Ion-tabs>

Css:

. Tab-item   {    margin-top: 1px;}  {    background: url (images/bar-home.png) no-repeat Center top}{     Background: url (images/bar-home-off.png) no-repeat Center top}

Ionic Custom Ion-tabs icon