How to add eye-icon inside input field?

Ionic Framework ionic-v3
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??

5 Likes
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>

10 Likes
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 Likes
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>
3 Likes
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>
13

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

here is my working HTML

<ion-list>
  <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>
    </button>
  </ion-item> 
  <ion-label *ngIf="!loginFormNPRUser.controls.Password.valid && (loginFormNPRUser.controls.Password.dirty || submitAttempt) && !Focus"
    class="Alert"> Enter a valid password</ion-label>
</ion-list>

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.

14

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

16

This solution worked for me on Ionic 4

<ion-item>
    <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>
3 Likes
17 
<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>
          Senha
        </ion-label>
        <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>
      </ion-item>

Em ts: passwordType:any = ‘password’

18

great worked like a charm

19

Without toggling and using a single element.

<ion-item>
	<ion-label color="primary" position="floating">Password</ion-label>
	<ion-input name="password" [type]="inputType" [(ngModel)]="inputValue"></ion-input>
	<ion-icon  [name]="(inputType == 'password') ? 'eye' : 'eye-off'" slot="end" (click)="inputType = (inputType == 'password') ? 'text' : 'password';"></ion-icon>
</ion-item>
1 Like
20

very good it worked perfectly even in ionic version 5

21

it worked perfectly, but when I click on the icon the keyboard opens, I don’t want that behavior, you should be able to touch the icon without opening the device keyboard.