How to add eye-icon inside input password field?

Hi, I am going to teach about how to add eye-icon inside input password field in ioinc 3 and angular 4 (android and ios)

Home.html

      <ion-content fullscreen="true" >

          <ion-item>

             <ion-label floating>Password</ion-label>

                <ion-input type="{{type}}" name="password" [(ngModel)]="password"
                  required  pattern=".{4,10}">

                </ion-input>

            <button *ngIf="!showPass" ion-button clear color="dark" type="button" 
                item-right  (click)="showPassword()">
               <ion-icon>

                 <img src="assets/img/invisible.png" style="position: relative; 
                        top:3px;" height="22px" width="22px">

               </ion-icon>

            </button>

            <button *ngIf="showPass" ion-button clear color="dark" type="button" 
               item-right (click)="showPassword()">
                 <ion-icon>

                     <img src="assets/img/visibility.png" style="position: relative;
                            top:3px;"  height="22px" width="22px">

                 </ion-icon>

            </button>

     </ion-content>

Home.ts

Add following line above the constructor.

         public type = 'password'; 

         public showPass = false; 

And then onClick() action  

          showPassword() {

               this.showPass = !this.showPass;

                     if(this.showPass){

                         this.type = 'text';

                          } else {

                    this.type = 'password';

                  }

                }