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

ionic-v1
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?