can't find an easy way to display ion-radio icon to the left

Question

In the ion-icon directive, the icon for the selected item is displayed at the right by defualt, there is an easy way to displayed at the left instead? thank you

 <ion-list>       
        <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'A'">Bogotá</ion-radio>
        <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'B'">Cali</ion-radio>
        <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'C'">Medellin</ion-radio>
        <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'D'">Bucaramanga</ion-radio>
        <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'E'">Cartagena</ion-radio>
        <ion-radio ng-model="choice" icon="icon ion-android-pin" ng-value="'F'">San Andres</ion-radio>
</ion-list>

Answer 1

put an item-left attribute to <ion-radio> element.

Answer 2

It doesn't look like it's possible to align icons within radio buttons using the built-in Ionic classes.

However, using a bit of custom CSS and a ng-class you can make this work.

HTML

<ion-list>       
  <label class="item item-icon-left item-radio">
    <input type="radio" name="group">
    <div class="item-content ">
      Go 1
    </div>
    <i class="radio-icon ion-checkmark"></i>
  </label>
  <label class="item item-icon-left item-radio">
    <input type="radio" name="group">
    <div class="item-content ">
      Go 2
    </div>
    <i class="radio-icon ion-checkmark"></i>
  </label>    

CSS

.item-icon-left .item-content {
  padding-left:3em;  
}

.item-icon-left i {
  left:0;
  right: auto;
}

With this setup the radio text is offset from the left side of the item. If you want the radio text left-aligned, and to shift when selected you could add a ng-class to the elements to offset the radio text when selected.

Here's an Ionic Play demo.