Button in SearchBar [RESOLVED]


Hi !

I would like to put a button with an icon in a search bar.

For the moment, i do a toolbar with the search bar and the button.

But the problem is I can’t put the button in the searchbar, by default it is separate at the right.

Sorry for my english and thanks for your help !


hello @Quiesan
did not get you what you exactly want to say.
so please explain in brief what you want to do.

search bar in header + button
but which kind of button ?

if you have any demo link for refer then please provide it here.


Thanks for your help.

I would like to do the srachBar like this : https://play.google.com/store/apps/details?id=com.lafourchette.lafourchette&hl=fr

I can’t put the button “locate” at the right of the searchbar…


may be this demo helpful to you

    <ion-row >
        <ion-searchbar [(ngModel)]="myInput" [showCancelButton]="shouldShowCancel" (ionCancel)="onCancel($event)"> </ion-searchbar>
        <ion-col col-2>
          <ion-icon ion-item name="map"></ion-icon>

but if you want exactly like this then you go through CSS and put button over it,


With row and col that does not work.

We don’t have a method for just put a button directly in search bar ?

Thanks @spanchal


no we don’t have any method like this,
which you expected. :slight_smile:


any updates on this?