如何将离子图标放置在离子HTML移动UI的文本字段中？

Question

晚上好，我又回来了另一个问题..，

我正在使用一些输入文本字段来从用户获取一些数据。我也在文本输入标签附近使用一些离子图标。我需要将这些离子图标放在文本字段中。因此，当用户选择或触摸该字段时，标签将浮动并且离子图标将保持不变。，目前标签是浮动的，但我需要文本字段内的离子图标。怎么可能？请帮我解决这个问题。

我的HTML：

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

我的CSS：

.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;
}

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;
  }