Ion-item with checkbox and icon on item-icon-right & icons in ion-option

ionic-v1
1

hello,

I would like to implement a “<” icon on the right of the ion-item in order to make the user slide the ion-options.

Even I would like to add a “X” on ion-options for the deletions.

Here is my code and I encounter an issue with the “I LOVE DOGS” Item.
Can someone help me and tell me how to have 2 icons (1 in the item and 1 or more in the ion-options) ?
Thank you very much.

  <ion-content has-header="true" has-tabs="true">

  <ion-list>

    <ion-item>
      <div class="item-checkbox">
       <label class="checkbox">
         <input type="checkbox"  
         ng-model="groupe0.checked" 
         ng-checked="groupe0.checked"
         ng-change="">
       </label>
       <span>I love kittens!</span>
      </div>
      <ion-option-button class="button-positive">Share</ion-option-button>
      <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
      <ion-option-button class="button-positive">Edit</ion-option-button>
    </ion-item>

    <ion-item class="item-icon-right"> 
      <div class="item-checkbox">
       <label class="checkbox">
         <input type="checkbox"  
         ng-model="groupe1.checked" 
         ng-checked="groupe1.checked"
         ng-change="">
       </label>
       <span>I love Dogs</span>
      </div>
      <i class="ion-ios7-arrow-left"></i> 
      <ion-option-button class="button-positive">Share</ion-option-button>
      <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
      <ion-option-button class="button-positive">Edit</ion-option-button>
    </ion-item>

    <li class="item item-icon-right" >
      <div class="item-checkbox">
       <label class="checkbox">
         <input type="checkbox"  
         ng-model="groupe.checked" 
         ng-checked="groupe.checked"
         ng-change="">
       </label>
       <span>I love birds</span>
      </div>
      <i class="icon ion-ios7-arrow-left"></i>
    </li>
2

Not sure what you wanted

can you Use the below code and see if it works:

        <ion-item class="item-icon-right">
            <div class="item-checkbox">
                <label class="checkbox">
                    <input type="checkbox"
                           ng-model="groupe1.checked"
                           ng-checked="groupe1.checked"
                           ng-change="">
                </label>
                <span>I love kittens!</span>
            </div>
            <i class="icon ion-ios7-arrow-left"></i>
            <ion-option-button class="button-positive">Share</ion-option-button>
            <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
            <ion-option-button class="button-positive">Edit</ion-option-button>
        </ion-item>

        <ion-item class="item-icon-right">
            <div class="item-checkbox">
                <label class="checkbox">
                    <input type="checkbox"
                           ng-model="groupe1.checked"
                           ng-checked="groupe1.checked"
                           ng-change="">
                </label>
                <span>I love Dogs</span>
            </div>
            <i class="icon ion-ios7-arrow-left"></i>
            <ion-option-button class="button-positive">Share</ion-option-button>
            <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
            <ion-option-button class="button-positive">Edit</ion-option-button>
        </ion-item>

        <ion-item class="item item-icon-right" >
            <div class="item-checkbox">
                <label class="checkbox">
                    <input type="checkbox"
                           ng-model="groupe.checked"
                           ng-checked="groupe.checked"
                           ng-change="">
                </label>
                <span>I love birds</span>
            </div>
            <i class="icon ion-ios7-arrow-left"></i>
            <ion-option-button class="button-positive">Share</ion-option-button>
            <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
            <ion-option-button class="button-positive">Edit</ion-option-button>
        </ion-item>
          </ion-list>
3

Hello, Thank you for your help.

The first icon ion-ios7-arrow-left is OK
Unfortunately the second one : ion-close-round is not displayed in the options.

Without the ion-ios7-arrow-left - I love Kittens display properly the ion-close-round.

        <ion-item>
      <div class="item-checkbox">
       <label class="checkbox">
         <input type="checkbox"  
         ng-model="groupe0.checked" 
         ng-checked="groupe0.checked"
         ng-change="">
       </label>
       <span>I love kittens!</span>
      </div>
      <ion-option-button class="button-positive">Share</ion-option-button>
      <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
      <ion-option-button class="button-positive">Edit</ion-option-button>
    </ion-item>

    <ion-item class="item-icon-right">
      <div class="item-checkbox">
       <label class="checkbox">
         <input type="checkbox"  
         ng-model="groupe1.checked" 
         ng-checked="groupe1.checked"
         ng-change="">
       </label>
       <span>I love Dogs</span>
      </div>
      <i class="icon ion-ios7-arrow-left"></i> 
      <ion-option-button class="button-positive">Share</ion-option-button>
      <ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
      <ion-option-button class="button-positive">Edit</ion-option-button>
    </ion-item>