Ionic Angularjs - Change ion-icon on Tab button (with ng-class)

Question

I'm trying to change the icon on Tab from "ion-social-google-outline" to "ion-social-google" when clicked, but cant figure out how to do it...

I can't use ion-tabs with icon-on, icon-off because I want to navigate within a ion-slide-box and therefor I have to use div class="tabs"

Here is my HTML code:

    <div class="tabs tabs-icon-top" ng-controller="NavigateController">
          <a class="tab-item" ng-click="navSlide(0)" >
            <i class="'icon ion-social-google-outline'"></i>
            Google
          </a>
          <a class="tab-item" ng-click="navSlide(1)">
            <i class="icon ion-ios-bolt-outline"></i>
            Electro
          </a>
     </div>

and this is my Controller for navigating between pages in Slide-Box:

angular.module('app.controllers', [])

.controller("NavigateController", function($scope, $ionicSlideBoxDelegate) {
    $scope.navSlide = function(index) {
        $ionicSlideBoxDelegate.slide(index, 500);
    }
});

How do I change the tab icon ?

swade · Accepted Answer · 2015-07-23 17:06:36Z

2

The best way to do it would by using the icon-on and icon-off attributes inside <ion-tabs> tag. Much like this:

<ion-tabs>
    <ion-tab title="" href="#" icon-on="ion-gear" icon-off="ion-gear-outline">
        Tab Name
    </ion-tab>
</ion-tabs>

EDIT:

I don't see why not, but I guess if you can't at all, then do something like this:

In your controller:

$scope.$state = $state;

HTML:

<i ng-class="{$state.current.name == 'tab 0': 'ion-ios-gear-outline', $state.current.name !== 'tab 0': 'ion-ios-gear'}"

edited Jul 23, 2015 at 17:06

answered Jul 22, 2015 at 20:44

swade

6682 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christer Over a year ago

I said that I can't use <ion-tabs>

swade Over a year ago

And why can't you use it inside of ion-slide-box?

Christer Over a year ago

I'm sorry, I don't know why I couldn't use <ion-tabs> yesterday together with the Slide-Box, however you were right, I got it to work with <ion-tabs> :) thx for the help guys!

swade Over a year ago

Glad it worked. Must have been a weird thing to not let it work yesterday.

Jess Patton · Accepted Answer · 2015-07-22 20:38:51Z

1

Here is a example from a app I wrote:

 <i style="vertical-align: middle !important; float: left; padding-right: 10px; padding-top: 0px, padding-bottom: 0px;" ng-class="{'ion-qr-scanner': item.Status == 'OPEN', 'stopiconopen': item.Status == 'OPEN', 'ion-checkmark-circled': item.Status == 'ARRIVED', 'stopiconarrived': item.Status == 'ARRIVED'}"></i>

if you look at ng-class it works like this {'the name of the class you want to apply', : the epxression to be evaluated}

so in your case if icon-on is being toggles true and false you could say

ng-class="{'icon-on-icon': icon-on, 'icon-off-icon': !icon-on}"

answered Jul 22, 2015 at 20:38

Jess Patton

2,4861 gold badge18 silver badges26 bronze badges

Collectives™ on Stack Overflow

Ionic Angularjs - Change ion-icon on Tab button (with ng-class)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related