Ion-list with right side icon

I am trying to make a ion-list with clickable items. On the right side I would like to have a icon with its own (click) method. How do I achieve this?

Tried:

<ion-content>
    <ion-list>
        <ion-item>
            <ion-label routerLink="http://google.com">
                <h3>Item 1</h3>
            </ion-label>
            <ion-icon slot="end" name="add-outline" (click)="tmpFunc('Item 1')"></ion-icon>
        </ion-item>
    </ion-list>
</ion-content>

Biggest problem with this is that the “label” are getting a border when “add” is clicked:
mylist

Also another problem with this solution is that the clickable area is limited to the label which is smaller then the item.

Hey, I was able to make it work with some adjustments… maybe it can help
I wrapped the ion-icon inside an ion-button with slot="end" that solves the problem with the border in the label.
To increase the ion-label clickable area per say I added the ion-no-margin class which removes the margins from the element and added some CSS so it takes the height of the parent and is correctly aligned.

html:

<ion-list>
  <ion-item>
    <ion-label class="ion-no-margin" routerLink="/home">
      <h3>Item 1</h3>
    </ion-label>
    <ion-button slot="end" (click)="tmpFunc('Item 1')" expand="full" fill="clear">
      <ion-icon name="add-outline"></ion-icon>
    </ion-button>
  </ion-item>
</ion-list>

scss:

ion-label {
  height: 100%;
  display: flex;
  align-items: center;
}

Looks great! Thanks!

1 Like