Ionic Swipe Left does not work with item-icon-right - css

Question

Ionic Swipe Left does not work with item-icon-right
Plunker showing the behavior
I'm running into some confusing behavior. With an ion-list and ion-items, I'm setting attributes to enable swiping.
<ion-list can-swipe="true">
<ion-item ng-repeat="element in ctrl.data" class="item-remove-animate item-icon-right">
<span>{{ element }}</span>
<span class="item-note">Date</span>
<i class="icon ion-chatbubble-working"></i>
<ion-option-button class="button-assertive icon ion-trash-a" ng-click="ctrl.delete($index) ">
</ion-option-button>
</ion-item>
</ion-list>
However, there's two issues that I'm running into
The remove animation does not ever seem to work
If set "item-icon-right" on the ion-list, then the swipe messes up completely. If I add an "i" tag with the class, swipe works.
Does anyone know why this is happening? I'm new to CSS and ion, so it's a bit difficult for me to know what to look for while debugging.
If you could tell me your thought process or point to related articles for debugging these unexpected behaviors, I'd really appreciate it

Answer 1

For deletion animation, it seems that collection-repeat does not add "ng-leave" class due to a performance hit. (ref)
For the swipe left bug, I had to remove "icon" from the ion-option class.

Answer 2

Here a Sample hope this help you
<ion-list class"animate-ripple" show-delete="false" can-swipe="true" swipe-direction="both">
<ion-item ng-show="orders_list.length==0">
<h2>No orders, Please go to Menu and Select Create a Order</h2>
</ion-item>
<ion-item item="order"
ng-repeat="order in orders_list | custom:filterOrder"
class="item-text-wrap" >
<a class="item item-icon-right" style=" border:none; text-align:left"
ng-click="showOrdersDetail(order.order_id)">
<i class="icon ion-chevron-right"></i>
<h2>Order No. {{order.order_id}}</h2>
<h5>TOTAL:{{order.total_pagar}}</h5>
<h5>ITEMS:{{order.total_items}}</h5>
</a>
<div ng-if="filterOrder.tipo_estado === 'ACT'">
<ion-option-button class="button-assertive" ng-click="del_order(order,{{$index}});">
Del
</ion-option-button>
<ion-option-button class="button-balanced" ng-click="pay_order(order);">
Pay
</ion-option-button>
</div>
<div ng-if="filterOrder.tipo_estado === 'PAG'">
<ion-option-button class="button-balanced" ng-click="showLinceseList(order.order_id);">
Apply a<br> License
</ion-option-button>
</div>
</ion-item>
</ion-list>