Cannot find a simple way to display the ion icon on the left side of the screen

Question

In the ion-icon directive, the icon for the selected item is displayed to the right of defualt, is there an easy way to display on the left instead? thanks

<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

It doesn't look like you could align the icons within the radio buttons using the built-in ionics classes.

However, using some custom CSS and ng-class , you can do 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 setting, the radio text is shifted to the left side of the item. If you want the radio text to be left-aligned, and to shift it, you can add an ng-class to the elements to offset the radio text when selected.

Here is the Ionic Play demo.

Answer 2

put the item-left attribute in & amp; element.

Answer 3

I ended up using this:

 <ion-radio ng-model="model" ng-repeat="item in items" ng-value="item.value" ng-click="select(item)" name="{{name}}"> <i class="icon {{item.icon}}"></i> <span>{{item.label}}</span> <p ng-if="item.desc">{{item.desc}}</p> </ion-radio>