Buttons, images and title in ion-toolbar

I’m trying to build an ion-toolbar that features a button at each end (ion-menu-button on the left and regular button on the right) with a text title and clickable image in the middle.

As you can see from the screenshot the title and image do not align nicely. I’d like to stick to standard ion elements if possible. What should my mark up look like to achieve this?

Current markup:

<ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button>
                <img src="menu.svg" alt="menu">
            </ion-menu-button>
        </ion-buttons>

        <ion-title (click)="search()">
            <ion-button fill="clear">
                <img slot="start" alt="favourite" src="favorite_selected.svg"
                             (click)="removeFavouriteLocation(selectedLocation.id); false;">
            </ion-button>
            {{selectedLocation.name}}
        </ion-title>

        <img #searchIcon  slot="end" id="searchIcon" src="search.svg" (click)="search()"/>
    </ion-toolbar>

1 post - 1 participant

Read full topic