Consistency of back button layout

ionic-v1
1

Hi there,

I’ve noticed that between the docs, the starter apps, and other code samples that the layout of how to use the back button is wildly different. For instance, from the docs its

<ion-nav-back-button class="button-clear">
  <i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>

Which looks like this.

From the starter tabs app its

<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
  Back
</ion-nav-back-button>

Which looks like this.

And from an ionic codepen example its

<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>

I’m curious which one I should use, because they all look different when I interchange them in my code. Should I be using .button-clear, .button-icon, or just .icon classes? Should I be using a separate <i> element for the icon, or should I just use it’s name as a class with ion-nav-back-button directive?

Some consistency would be greatly appreciated!

I’m using the latest Ionic, v1.0.0-beta.6 version.
I want the end product to look like this!

2

It basically boils down to a few ways to being able to do the same thing.

There are subtle differences between all of them.

An example of the ones you posted. Note that I removed the ion-nav-button and just used button. It won’t change the appearance as this is just for css