Icon-off/icon-on functionality for buttons

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>

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>

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

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


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.

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-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>

Here is another example:

1 Like