how to make icon inside text input clickable in ionic 5

Issue

i added an icon in a text input, the icon is supposed to be clickable but after adding inside the text input it's no more clickable

<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
  <ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>

Solution

You need to place the <icon> element inside the <button> element.

<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
    <!-- In Ionic 4 version it is used as follows. -->
     <ion-button (click)="clickEventFunction($event, item.id)">
        <ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
    </ion-button>

     <!-- Used as below before "Ionic 4" release. -->
     <button (click)="clickEventFunction($event, item.id)">
        <ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
    </button>
</ion-input>

clickEventFunction(event: Event, id: any){
    /* Something */
}

---

References

• ion-button
• Ionic API Documentation

Answered By - Sercan