Ionic icon location

I am currently building a shopping cart application. I am using ionic on top of angularjs.

http://ionicframework.com/docs/components/#item-icons under List-> Icons

As you can see on ionic tutorial page, you can set the icon to be on the right or left.

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

However when i try on my computer, it doesn't work that way.

I followed ionic guide but it seems my icons are just right on my text, not on the right side of the entire row.

I have attached my code as well.

<div class="col ">
    <label class = "item item-input">
        <i class = "icon ion-search placeholder-icon"></i>
        <input type ="text" placeholder="Search" ng-model ="query">
    </label>    
    <div class="padding-horizontal">
        <ion-list>
            <ion-item ng-repeat="item in list | filter:query | orderBy:'name'">
                    <a class "item item-icon-right" >
                        <span style="color:blue">{{item.name}}</span>
                        <i class="icon ion-plus-circled" ng-click="add(item.name)"></i>
                    </a>
            </ion-item>
        </ion-list>
    </div>
</div>

Should I be using CSS? wanted to attached images but i can't because I have just created this id.