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 ponent. 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>

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 ponent. 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>

• javascript
• angular
• typescript
• ionic4
• searchbar

• can you share your code so far? also are you using cancel option? this may help for clarity – Sergey Rudenko Commented Feb 5, 2020 at 4:24
• @SergeyRudenko Thanks for reply, I have updated my question. I'm using cancel option also. – Sandip Moradiya Commented Feb 5, 2020 at 4:40

1 Answer 1

Since the search-bar ponent does not have shadow dom enabled, you can manipulate the CSS of the inner ponents 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;
}