Star icons dont display on right

The code below kinda works. I want to click on the star in the nav and onclick display the star icons link to each element. However it displays on the left and not the right. Is there an ionic way of positioning that i’m unaware of or is css the answer.
Also, i preferably not want to use ion-delete-button since its red, how do i get a stable color button

<ion-nav-buttons side="right"> <button class="button button-icon icon ion-ios7-star" ng-click="data.showDelete = !data.showDelete;"> </button> </ion-nav-buttons> <ion-content class="has-header"> <ion-list show-delete="data.showDelete"> <label class="item item-input nav-title-slide-ios7"> <i class="icon button-icon ion-ios7-search placeholder-icon"></i> <input type="text" placeholder="Search" ng-model="food.description"> </label> <ion-item ng-repeat="food in foods | filter:food" type="item-text-wrap" href="#/tab/fooddetail/{{food._id}}"> {{food.description}} <ion-delete-button class="ion-ios7-star-outline" ng-click="onItemDelete(food._id)"> </ion-delete-button> </ion-item> </ion-list> </ion-content>

Just use the icon-right class.

<ion-nav-buttons side="right">
<button class="button button-icon icon ion-ios7-star icon-right" 
ng-click="data.showDelete = !data.showDelete;">
</button>

Sample : http://codepen.io/calendee/pen/Bfhpi