Clickable icon inside text input

Question

I have a toggle and i want to add an icon that act like my toggle

I want to add, a clickable icon inside a textfield.

Textfield.html

<ion-input   id="text"  [ngModel]="text"  rows="1"  type="text"></ion-input>
<ion-toggle class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)"  #ioToggle ></ion-toggle>

is there a way to add an icon inside the input and will act like the toggle ?

Answer 1

Try this: Your file.html

    <ion-input id="text" rows="1" type="text"></ion-input>
  </div>
  <button id="button" ion-button icon-only clear>
  </button>
</div>

file.scss

.Test #button {
  vertical-align: top; // change this 
  display: inline-block;
  width: 25px;
  margin: 0;
  padding: 0;
  position: relative;
  top: -12px; //change this too
}