How to add eye-icon inside input field?


#1

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??


#2

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>


#3

Are u sure this would work?


#4

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.


#5

Anyone else having an actual solution?


#6

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


#7

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>


#8

It worked like a charm for me. Thanks.


#9

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>
          </button>

#10

Worked perfect, thank you.


#11

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

<button 
  ion-button
  icon-only 
  clear 
  color="dark" 
  type="button" 
  item-right 
  (click)="showPasswordText = !showPasswordText"
>

#12

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-item>
        <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>
        </button>
      </ion-item>