Display Info Icon Inline In Ion-item

I want to display ionic info icon at the end of my input box. However, the following snippet shows only input box, not the icon: <

Solution 1:

ion-item sets the content in a single row. You were missing an attribute item-end on the button. I would also recommend adding icon-only in order to get the full button as the specified icon.

Code:

<ion-content padding>
  <form  novalidate offset-lg-3 offset-xl-4 col-lg-6 col-xl-4>
    <ion-list inset>
      <p>Forget password</p>
      <ion-item>
        <ion-input  placeholder="Email or Phone" name="email">
          </ion-input>
        <button ion-button clear item-end icon-only><!-- here -->
          <ion-icon name="ios-information-circle-outline" ></ion-icon>
        </button>
      </ion-item>    
    </ion-list>
    <button ion-button round full type="submit">Submit</button>    
  </form>
</ion-content>

demo

Solution 2:

<ion-item>
    <ion-input  placeholder="Email or Phone" name="email">
      </ion-input>
    <button ion-button clear item-end icon-only>
    <ion-icon name="ios-information-circle-outline" ></ion-icon>
    </button>
  </ion-item>    

You have to use ion-icon inside ion-label