Icon Buttons

Icons can easily be added to any button by using either the built in Ionicons, or any custom font-pack you choose. Learn more about icons.

Icons can also be set with a child element inside the button, however, assigning the icon directly to the button reduces the number of elements in the DOM.

<buttonclass="button"><iclass="icon ion-loading-c"></i> Loading...
</button><buttonclass="button icon-left ion-home">Home</button><buttonclass="button icon-left ion-star button-positive">Favorites</button><aclass="button icon-right ion-chevron-right button-calm">Learn More</a><aclass="button icon-left ion-chevron-left button-clear button-dark">Back</a><buttonclass="button icon ion-gear-a"></button><aclass="button button-icon icon ion-settings"></a><aclass="button button-outline icon-right ion-navicon button-balanced">Reorder</a>