# Ionic 4 Input with icon

**URL:** <https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688>\
**Category:** Ionic Framework\
**Created:** [June 7, 2019, 5:04am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688 "2019-06-07T05:04:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![amjayesh07](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amjayesh07/32/126749_2.png) [@amjayesh07](https://forum.ionicframework.com/u/amjayesh07)\
**Post date:** [June 7, 2019, 5:04am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/1 "2019-06-07T05:04:36Z")

</div>

**Hello folks,**

**How can we add ionic 4 input with icon,**  
also one more issue is there that if i add placeholder on floating labelled input text, **floating doesn’t work**

@brandyshea @mhartington @nnnnnorthhhhh @perry

Can anyone help me ?

---

<div class="post-metadata">

**Author:** ![gokujy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gokujy/32/117753_2.png) [@gokujy](https://forum.ionicframework.com/u/gokujy)\
**Post date:** [June 7, 2019, 5:17am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/2 "2019-06-07T05:17:48Z")

</div>

Just add input and after it add your icon with slot=“end”

```auto
    <ion-item>
      <ion-label position="floating">Floating Label</ion-label>
      <ion-input></ion-input>
      <ion-icon name="eye" slot="end"></ion-icon>
    </ion-item>

```

hope it helps you 🙂

---

<div class="post-metadata">

**Author:** ![amjayesh07](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amjayesh07/32/126749_2.png) [@amjayesh07](https://forum.ionicframework.com/u/amjayesh07)\
**Post date:** [June 7, 2019, 5:24am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/3 "2019-06-07T05:24:16Z")

</div>

Thanks @gokujy ✌, it works,  
I did that, but i added icon above ion-input

---

<div class="post-metadata">

**Author:** ![amjayesh07](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amjayesh07/32/126749_2.png) [@amjayesh07](https://forum.ionicframework.com/u/amjayesh07)\
**Post date:** [June 7, 2019, 5:32am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/4 "2019-06-07T05:32:19Z")

</div>

@gokujy why its not working with placeholder ?

---

<div class="post-metadata">

**Author:** ![ChrisGriiffith](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chrisgriiffith/32/66576_2.png) [@ChrisGriiffith](https://forum.ionicframework.com/u/ChrisGriiffith)\
**Post date:** [June 7, 2019, 2:51pm UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/5 "2019-06-07T14:51:46Z")

</div>

Could you supply a graphic of exactly the layout you are seeking? Just want to be clear on what you want to do.

Thanks

---

<div class="post-metadata">

**Author:** ![amjayesh07](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amjayesh07/32/126749_2.png) [@amjayesh07](https://forum.ionicframework.com/u/amjayesh07)\
**Post date:** [June 13, 2019, 5:57am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/6 "2019-06-13T05:57:10Z")

</div>

> Hey @ChrisGriiffith , here is the graphics view as said.

![1](https://global.discourse-cdn.com/ionicframework/original/3X/0/c/0c7af8a869af79029a9c864d96f59d28a6a4aa89.png)

> and this is the code (ionic 4)

```auto
				<ion-list>
					<ion-item>
					  <ion-label color="primary" position="floating">Name</ion-label>
					  <ion-input autocorrect="on" autofocus="on" clearInput="true" clearOnEdit="true" color="primary" inputmode="text" placeholder="Enter your name" required="true"></ion-input>
					  <ion-icon name="person" color="primary" slot="end"></ion-icon>
					</ion-item>
				</ion-list>

```

---

<div class="post-metadata">

**Author:** ![nelson6e65](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nelson6e65/32/126182_2.png) [@nelson6e65](https://forum.ionicframework.com/u/nelson6e65)\
**Post date:** [August 15, 2019, 5:37am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/7 "2019-08-15T05:37:07Z")

</div>

You can apply `align-self-center` attribute (or `ion-align-self-end` CSS class) to the `<ion-icon>`:

> \<ion-icon name=“person” color=“primary” slot=“end” **align-self-center** \>

> **[CSS Utilities | Ionic Documentation](https://ionicframework.com/docs/layout/css-utilities#flex-item-properties)**
>
> CSS Utilities: Classes for Text/Element Alignment or Modification

---

<div class="post-metadata">

**Author:** ![coolsasindu](https://avatars.discourse-cdn.com/v4/letter/c/7bcc69/32.png) [@coolsasindu](https://forum.ionicframework.com/u/coolsasindu)\
**Post date:** [November 23, 2019, 7:51am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/8 "2019-11-23T07:51:57Z")

</div>

add to below

> ```
> <ion-input > </ion-input>       
> 
> ```

```
    <i class="icon ion-ios-telephone"></i>

```

---

<div class="post-metadata">

**Author:** ![TanmayMule](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@TanmayMule](https://forum.ionicframework.com/u/TanmayMule)\
**Post date:** [June 9, 2020, 8:46am UTC](https://forum.ionicframework.com/t/ionic-4-input-with-icon/165688/9 "2020-06-09T08:46:31Z")

</div>

> [@nelson6e65](#):
>
> `ion-align-self-end`

Perfect! Also look better when added `size="small" ` to `<ion-icon>`.