Right align spinning icon on button-block?

1

I’m trying to add a spinning icon to a button-block button but when I add the icon, the whole button starts spinning.

<button class="button button-clear button-positive button-block icon-right ion-ios7-reloading" ng-click="saveData()">Save</button>

I tried adding it with a but I can’t get it to right align, it’s next to the text not at the edge of the button.

<button class="button button-clear button-positive button-block" ng-click="saveData()">Save<i class="ion-ios7-reloading icon-right"></i></button>

Any ideas? Thanks.

2

Hows this?

3

Hey mhartington,

Isn’t that the same as my second example? I’m trying to get it to be aligned with the right side of the button, in other words, closer to the right edge of the button than the button text.

4

You know I didn’t even see the second example :smile:

You could adjust the padding on the button from

.button{
    padding: 1px 12px 0 12px;
}

to

.new.button{
    padding: 1px 6px 0 6px;
}

Or even put in a &nbsp; after your text to space it out a bit more. A bit hacky but it gets the job done. The codepen has been updated to show this