CODEWITHSUNDEEP
ionic2
cherry-wave
cherry-wave

Reputation: 731

Ionic 2: Input with Icon-Label

There are quite nice input-examples in the Ionic2 documentation but has somebody tried to create a normal label (not floating or so) with an input AND an icon to the left of the label?

I thought it might go like that:

<ion-item>
        <ion-icon name="logo-playstation"></ion-icon>
        <ion-label>PSN</ion-label>
        <ion-input clearInput type="text"></ion-input>
</ion-item>

but the Icon doesn't apper. Should I use a <div> for that or how would/did you do this?

Upvotes: 9

Views: 29000

Answers (2)

Johnathan J.
Johnathan J.

Reputation: 111

I had to use an icon and input element in separate fields of a row.. within a table.. within a ion-col.. and within an ion-row.

    <ion-row>
        <ion-col col-auto>
            <table>
                <tr>
                    <td>
                        <ion-icon name="logo-playstation"></ion-icon>
                    </td>
                    <td>
                        <ion-input clearInput type="text"></ion-input>
                    </td>
                </tr>
            </table>
        </ion-col>
     </ion-row>

Upvotes: 1

AishApp
AishApp

Reputation: 4162

You have to use ion-icon inside ion-label

<ion-item>        
        <ion-label> <ion-icon name="logo-playstation"></ion-icon> PSN</ion-label>
        <ion-input clearInput type="text"></ion-input>
</ion-item>

Upvotes: 42

Related Questions