Search code examples
javascriptangulartypescriptionic4searchbar

How to move search icon of search-bar at right side of search bar in ionic 4

I'm Developing a Hybrid app using ionic-4. I have my simple search page and I want to move the search icon to the right side of the ion-searchbar component. I have tried this with different CSS rules but i didn't find any solution.

my ionic searchbar code is as below:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-searchbar showCancelButton="never"></ion-searchbar>
  </ion-toolbar>
</ion-header>

enter image description here

Solution

  • Since the search-bar component does not have shadow dom enabled, you can manipulate the CSS of the inner components just fine. You just need to reset the ion-icon left CSS property and make sure you are doing this inside global.scss:

    ion-searchbar ion-icon {
  right: 16px !important;
  left: auto !important;
}

    If you set dir="rtl" on the html tag inside index.html, you can see that ionic does this the same way when the icon needs to be flipped:

    [dir=rtl].sc-ion-searchbar-md .searchbar-search-icon.sc-ion-searchbar-md {
  left: unset;
  right: unset;
  right: 16px;
}