Icon-off/icon-on functionality for buttons

ionic-v1
1

On this page, there is a sample for buttons and I am using the following code to show a button with image:

<a class="button button-icon icon ion-ios-heart-outline"></a>

is it possible to have it similar to the ion-tab icons where you can set icon-off/icon-on icons?

so if icon not clicked set it to :

<a class="button button-icon icon ion-ios-heart-outline"></a>

if clicked set it to :

<a class="button button-icon icon ion-ios-heart"></a>
2

I think this is what you need. You can put icon-on and icon-off attributes directly on ion-tab, like this:

<ion-tab title="Home" icon-off="ion-ios-heart-outline" icon-on="ion-ios-heart" href="#/tab/home"> ... </ion-tab>

3

no this is for tabs only, it will not show up in any place.

4

Yes, sorry about that. I miss read your question.
Here are two button examples that could get you started:

2 Likes
5

thanks a lot, any idea how to save the button states? if I am on a list, I go inside another list and press the button. When going back, the button is not bold anymore.

6

In that case you would have to remember button state together with the items in the list. For example, if the list looks like this:

$scope.list = [{“title”: “item 1”}, {“title”: “item 2”}];

I would extend that list to have checked property:

$scope.list = [{“title”: “item 1”, checked: false}, {“title”: “item 2”, checked: false}];

And the list would be kept in a Service object. Controller would be used to retrieve list from the Service and save list back to Service.

Than in the template it would be something like this:

<ion-list>
   <ion-item ng-repeat="item in list">
    <a class="button button-icon icon" ng-class="item.checked ? 'ion-ios-heart' : 'ion-ios-heart-outline'">{{item.title}}</a>
  </ion-item>
</ion-list>

Here is another example:

1 Like