How can I place the ionic icon inside the text field of an ionic HTML mobile UI?

Question

I am using input text fields to get data from the user. I am also using some Ionic icons near text input labels. I need to place those icons inside the text fields. So that the label will be floating and the icon will remain constant when the field is selected or touched by the user.

Currently, the label is floating but I need to place the Ionic icon inside the text fields.

How's it possible? Please help me to solve this issue.

.icon-input {
  display: flex;
  align-items: flex-end;
  position: absolute;
  padding-right: 10px;
  bottom: 0;
  font-size: 18px;
  min-width: 0 !important;
  text-align: left !important;
  color: #00b1ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css" rel="stylesheet"/>

<ion-item>
  <ion-label color="primary" floating>Subject</ion-label>
  <ion-icon class="icon-input" name="create" item-start></ion-icon>
  <ion-input type="text" [(ngModel)]="vm.subject" placeholder="Subject" formControlName="subject" tabindex="1" (keyup)="moveFocus($event,password, false)"></ion-input>
  </ion-item>
  <div class="error-message" *ngIf="form.controls.subject.errors && (form.controls.subject.dirty || form.controls.subject.touched)">
  <p *ngIf="form.controls.subject.errors?.required">Subject is required</p>
</div>

<ion-item>
  <ion-icon class="icon-input" name="help" item-start></ion-icon>
  <ion-label color="primary" floating>Query</ion-label>
  <ion-input type="text" [(ngModel)]="vm.query" placeholder="Query" formControlName="query" tabindex="2" (keyup)="moveFocus($event,password, false)"></ion-input>
</ion-item>
<div class="error-message" *ngIf="form.controls.query.errors && (form.controls.query.dirty || form.controls.query.touched)">
  <p *ngIf="form.controls.query.errors?.required">Query is required</p>
</div>


    

Answer 1

html

  <ion-item>
    <ion-label color="primary" floating>Subject</ion-label>
    <span item-right><ion-icon name="create"></ion-icon></span>
    <ion-input type="text" placeholder="Subject"></ion-input>
  </ion-item>

scss

.item-inner {
    flex-direction: row-reverse !important;
  }
  ion-icon {
    color: black !important;
    margin: 15px -13px -33px 0 !important;
    background-color: transparent;
    font-size: 27px;
    padding: 0px 7px 12px 0px;
  }

Answer 2

"simply put icon inside ion-input closed tag", Used Item right and left for a position.

<ion-input formControlName="password" placeholder="Password">
      <ion-icon name="arrow-forward" item-right></ion-icon>
      </ion-input>