How Can I Show Two Icons As Right Aligned Within An Ionic List?

I'm trying to put in a list two button icons that can be clicked. I tried doing something like this but the icons overlap:

<div class="item item-button-right">
                List item 1  
                <div class="buttons">
                    <button class="button button-energized">
                        <i class="icon ion-android-locate"></i>
                    </button>
                    <button class="button button-dark">
                        <i class="icon ion-android-arrow-forward"></i>
                    </button>
                </div>
            </div>

Also noticed your code pen attachment so thought i'd update that too to demonstrate.

http://codepen.io/anon/pen/bNjypG

Solution 2:

Here is an example

<ion-view ng-controller="inspectorsCtrl as vm">
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat=" item in vm.items" class="item-icon-right">
                {{item.info}}
                <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Solution 3:

Try like this:

First take one div class and then take 2 buttons inside the div tag.

<div class="buttons" > 
    <button class="button button-icon" >
        <i class = "icon ion-funnel"></i>
    </button>
    <button class="button button-icon" >
        <i class = "icon ion-android-document"> </i>
    </button>   
</div>

Solution 4:

The solution using .buttons works only if the text is not long or if there are only two icons.

Along with flexbox it works in any situation.

<ion-list>
  <ion-item 
    ng-repeat="item in items"
    class='item-multiple-buttons'
  >
    <div class="buttons buttons-left">
      <button class="button button-icon ion-checkmark-circled"></button>
      <button class="button button-icon ion-information-circled"></button>
    </div>

    <div class="item-content" >
          {{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>

    <div class="buttons buttons-right">
      <button class="button button-icon ion-close-circled"></button>
      <button class="button button-icon ion-help-circled"></button>
      <button class="button button-icon ion-minus-circled"></button>
      <button class="button button-icon ion-plus-circled"></button>
    </div>
  </ion-item>
</ion-list>

SCSS:

/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;

// From _button.scss, hardcoded value
$button-icon-padding: 6px;

.item {     
  &.item-multiple-buttons{
    display: flex;
    padding: 0 $item-padding;

    .item-content{
      flex: 1;
      padding: $item-padding 0;
    }

    .buttons{
      display: flex;

      &.buttons-left{
        margin-right: $item-padding - $button-icon-padding;
      }

      &.buttons-right{
        margin-left: $item-padding - $button-icon-padding;
      }

      .button{
        font-size: $item-icon-font-size;
      }
    }
  }
}

Codepen: http://codepen.io/M1k3l/pen/PWBdOB