ionic2: clickable ion-icon

Ionic Framework ionic-v3
1

Noob question. Still figuring out ts, ng2, and ionic2.
How do I make an ion-icon clickable and then handle that event?

  <ion-item>
    <ion-input type='text' (input)='search($event, searchKey)' placeholder='type here'></ion-input>
    <ion-icon name="close-circle" item-right (<<??>>)='clearInputText($event)'></ion-icon>
  </ion-item>
2

You can add a <button> element to achieve this:

<ion-item>
    <ion-input type='text' (input)='search($event, searchKey)' placeholder='type here'></ion-input>
    <button item-right clear (click)='clearInputText($event)'>
        <ion-icon name="close-circle"></ion-icon>
    </button>
</ion-item>
10 Likes
3

like #iignatov said above, put it inside button tag.but icon wasnt clickable for my case.but surrounding area of button was clickable.what i did was to make button on top of icon using z index.

1 Like
4

how to set the size of the button same as the the icon? other wise you have a expanded clicking area around icon.