Ionic 4 Input with icon

Ionic Framework
1

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 ?

2

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

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

8 Likes
3

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

1 Like
4

@gokujy why its not working with placeholder ?

5

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

Thanks

2 Likes
6

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

1

and this is the code (ionic 4)

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

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>

2 Likes
8

add to below

 <ion-input > </ion-input>       

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

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

1 Like