Icon-left/icon-right in button-bar resizes the icon


#1

So i got this code almost exactly like the example:

    <div class="button-bar">
        <a class="button button-energized icon-left ion-checkmark-circled">Finish</a>
        <a class="button button-calm icon-left ion-chevron-left">Previous</a>
        <a class="button button-balanced icon-right ion-chevron-right" ng-click="nextQuestion()">Next</a>
    </div>

It enlarges the icon and the text is not parallel (vertical center) any more.

Is this supposed to be like this?


#2

Use <button> instead of <a>.

Buttons and anchor tags get slightly different styling when wrapped in button bars.


#3

That improved the alignment. Thanks


#4

So using a <button> element is only half of the solution when using buttons with icons in a nav bar.

See the “back” button in this codepen:

The icon is awkwardly close to the text of the button. This appears to be because of styling for .bar .button.button-icon:before, .bar .button .icon:before, .bar .button.icon:before, .bar .button.icon-left:before, .bar .button.icon-right:before that sets padding left & right to 2px for all buttons with icons in the header. This seems wrong to me – am I alone in this?