Buttons, images and title in ion-toolbar

Ionic Framework
1

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?

Screen Shot 2021-11-29 at 8.02.34 AM
Screen Shot 2021-11-29 at 8.02.34 AM966×184 16.1 KB

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>
3

I guess you can try flex to align then vertically

ion-title {
   display: flex;
   align-items: center;
   justify-content: center;
}
4

The solution I have settled on is

            <ion-title>
                <ion-icon alt="favourite" src="assets/icon/favorite_selected.svg" class="favourite-toggle"
                          (click)="removeFavouriteLocation(selectedLocation.id); false;"></ion-icon>
                <ion-label  (click)="initLocationModal()" >{{selectedLocation?.name}}</ion-label>
            </ion-title>

along with some vertical alignment fixes


ion-title {
    ion-icon.favourite-toggle {
        font-size: 24px;
        vertical-align: middle;
        padding-right: 5px;
    }
    ion-label {
        vertical-align: middle;
    }
}
1 Like