How to add eye-icon inside input field?


I want to add password field with an eye icon so that user can toggle the visibility of the password.

How can I add eye-icon inside input with Ionic2??


Here is some sample code that allows you to place an eye icon to the right of the input field.

<ion-input type="password" placeholder="Password"></ion-input> <ion-icon name="ios-eye-outline" item-right></ion-icon>


Are u sure this would work?


I am a little unsure of what you want the icon to look like inside the input, but this does put an icon to the right of the input. So the above code is just for the input, not the other parts of the html that need to encase the above snippet.


Anyone else having an actual solution?


Same issue here… anyone found solution for keeping icon on right side of ion-input.?


Check the sample code below, it works…

<ion-item *ngIf="!showPasswordText"> <ion-label floating> {{"Password" | translate}} </ion-label> <ion-input [(ngModel)]="password" type="password" formControlName="password" required> </ion-input> <button ion-button clear color="dark" type="button" item-right (click)="managePassword()"> <ion-icon name="eye"> </ion-icon> </button> </ion-item>


It worked like a charm for me. Thanks.


Thanks to @dev_reactore, I had change your code a little bit to have all the functionality inside the html. The change is on the click event.

          <ion-input type="text" *ngIf="showPasswordText"></ion-input>
          <ion-input type="password" *ngIf="!showPasswordText" ></ion-input>
          <button ion-button clear color="dark" type="button" item-right (click)="showPasswordText = !showPasswordText">
            <ion-icon name="eye"> </ion-icon>


Worked perfect, thank you.


If you want the icon to be a little bigger use the icon-only directive on the button

  (click)="showPasswordText = !showPasswordText"


To make the eye open and close and have the input box hold its contents so you can flick between visible and asterixed then I use:

        <ion-label floating>password</ion-label>
        <ion-input type="text" *ngIf="showPwd" [(ngModel)]="user.pwd"></ion-input>
        <ion-input type="password" *ngIf="!showPwd" [(ngModel)]="user.pwd"></ion-input>
        <button icon-only ion-button clear type="button" item-right (click)="showPwd=!showPwd">
          <ion-icon *ngIf="showPwd" name="eye"></ion-icon>
          <ion-icon *ngIf="!showPwd" name="eye-off"></ion-icon>


Hello , I have used Eye and Eye-off to see and hide password inside the ion-input field.

here is my working HTML

  <ion-item [ngStyle]="{'width':'90%', 'height':'90%', 'left': '5%', 'background-color':'#000000', 'color':'#27aae1'}">
    <ion-label floating *ngIf="showPasswordText">Password</ion-label>
    <ion-input type="text" *ngIf="showPasswordText" formControlName="Password" (ionBlur)="Focus=false" (ionFocus)="Focus=true" minlength="8"></ion-input>
    <ion-label floating *ngIf="!showPasswordText">Password</ion-label>
    <ion-input type="password" *ngIf="!showPasswordText" formControlName="Password" (ionBlur)="Focus=false" (ionFocus)="Focus=true" minlength="8"></ion-input>
    <button ion-button clear icon-only style="padding-top: 10px;" color="primary" type="button" item-right (click)="showPasswordText = !showPasswordText">
      <ion-icon *ngIf="!showPasswordText" name="eye"> </ion-icon>
      <ion-icon *ngIf="showPasswordText" name="eye-off"> </ion-icon>
  <ion-label *ngIf="!loginFormNPRUser.controls.Password.valid && (loginFormNPRUser.controls.Password.dirty || submitAttempt) && !Focus"
    class="Alert"> Enter a valid password</ion-label>

in Typescript file you need to declare a formgroup variable with password field and a showPasswordTest:boolean = false; variavble.

I you feel stuck you can comment I’ll share the code with you.


Hi, I’m having trouble with this. Can you share the whole code with me? Thanks!


This solution worked for me on Ionic 4

    <ion-label>End Date</ion-label>
    <ion-input readonly="true" (click)="setEndDate()" [ngModel]="endDate | date: 'dd/MM/yyyy'"></ion-input>
    <ion-icon name="calendar" slot="end"></ion-icon>

<ion-item style="position: relative;">
          <ion-icon name="eye"></ion-icon>
          <ion-label floating>
          <ion-icon name="key" item-start class="text-primary"></ion-icon>
        <ion-input #email formControlName="password" name="password" [type]="passwordType" [class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty"></ion-input>
        <button item-end (click)="passwordType='text'" *ngIf="passwordType=='password'" style="position: absolute; right: 0; bottom: 0; background: transparent"><ion-icon style="font-size: 24px" name="eye"></ion-icon></button>
        <button item-end (click)="passwordType='password'" *ngIf="passwordType=='text'" style="position: absolute; right: 0; bottom: 0; background: transparent"><ion-icon style="font-size: 25px" name="eye-off"></ion-icon></button>

Em ts: passwordType:any = ‘password’