Ionic 2: Input with Icon-Label

Question

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?

Answer 1

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>

Answer 2

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>