ion-input with icon at the end

Issue

    <ion-input placeholder"Username" formControlName"userName" class"primary-input"></ion-input>

         <ion-input [type]"passwordType" placeholder"Password" formControlName"password" autocomplete"off"  class"primary-input"> 
        <ion-icon name"eye"  (click)"togglePasswordMode()"  ></ion-icon>
        </ion-input>
  <div class"ion-margin-top">
    <ion-button expand"block" (click)"!isSubmitted && login()" >LOGIN</ion-button>
  </div>

 The above is my code currenty showing like this

currently showing icon at the start but i need to show at the end ..

i tried ion-item with slot”end” works but i dont want use that beacuse textbox show slightly right side ..I need some alternative solution without using ion-item..

I am using ionic 5 ..Please some one help to css EDIT:

.primary-input {
    background: aliceblue;
    color: #999999;
    border-radius: 5px;
    margin-bottom: 10px;
}

EDIT: This is the output of ion-item

Solution

Usually we use the icon in a button separately from the ion-input field. So you can use a border on the ion-item as the example.

HTM file:

      <form #loginForm"ngForm" class"access" (submit)"login(model)">
        <ion-list lines"none">
          <ion-item>
            <ion-label position"floating">EMAIL</ion-label>
            <ion-input type"text" name"email" [(ngModel)]"model.email"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label position"floating">PASSWORD</ion-label>
            <ion-input type"password" name"psw" [(ngModel)]"model.psw"></ion-input>
            <ion-button slot"end" fill"clear" (click)"showPassword()" class"seeClient">
              <ion-icon *ngIf"showPswtrue" name"eye-outline" color"warning" class"iconEye"></ion-icon>
              <ion-icon *ngIf"showPswfalse" name"eye-off-outline" color"warning" class"iconEye"></ion-icon>
            </ion-button>
          </ion-item>
        </ion-list>
        <ion-button [disabled]"!mobile" expand"block" type"submit" color"warning">Entrar</ion-button>
      </form>

SCSS file:

.iconEye {
    font-size: 24px;
    padding-left: 4px;
    padding-top: 12px;
    vertical-align: middle;
}

ion-item {
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid #eac402;
    --highlight-height: 0px;
    --highlight-color-valid: #eac402;
    --highlight-color-focused: #eac402;
    --highlight-color-invalid: #eac402;
}

Answered By – Everton Costa