Shift icon on the left in a button with ion-item

Ionic Framework ionic-v3
1

item-right attribute is working but item-left is not.

These are the results I am getting with the code below.image

<ion-content padding>
    
    <button ion-item (click)="search(searchWord)" clear primary>
            <i item-left class="fa fa-location-arrow"></i>
            Search nearby
            <p>Greenford</p> <!-- Info From User Location --> 
    </button>
    
    <button ion-item (click)="search(searchWord)" clear primary>
        <i item-left class="fa fa-location-arrow"></i>
        <ion-label>
            <h2>Search nearby</h2>
            <p>Greenford</p>
        </ion-label>              
    </button>
    
    <button ion-item (click)="search(searchWord)" clear primary>
        <i item-right class="fa fa-location-arrow"></i>
        <h2>Search nearby</h2>
        <p>Greenford</p>
    </button>
    
    <button ion-item (click)="search(searchWord)" clear primary>
        <i item-right class="fa fa-location-arrow"></i>
        <ion-label>
            <h2>Search nearby</h2>
            <p>Greenford</p>
        </ion-label>              
    </button>
    
</ion-content>

Do you know what’s happening? And how I can have the icon on the left with the text next to it?

2

Hi Dee!

Check this out.
http://play.ionic.io/app/a5eab780cfaa

It pretty much does the same thing. The implementation could be different, but the end result is same.

Let me know if anything.

-Nathan

1 Like
3

Thanks for the code. It gave me the idea to use ion-row and this code is working.

        <button ion-item (click)="search(searchWord)" clear primary>
            <ion-row>
                <ion-col width-10>
                    <i item-left class="fa fa-location-arrow"></i>
                </ion-col>
                <ion-col width-90>
                    Search nearby
                    <p>Greenford</p>
                </ion-col>
            </ion-row>
        </button>
4

This indeed seems to be a bug on the framework side. Something to with the button element. If you switch the button to an <a> it will align correctly.

    <a ion-item (click)="search(searchWord)">
        <i item-left class="fa fa-location-arrow"></i>
        <ion-label>
            <h2>Search nearby</h2>
            <p>Greenford</p>
        </ion-label>
    </a>