How to replace the default search icon with a custom Ionicon in an Ionic 3 Searchbar

The icon for the Ionic 3 Searchbar is a hard-coded SVG written in SCSS rules. In particular, they are saved under the following variables:

$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'>
  <path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/>
  <line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/>
  </svg>";
$searchbar-md-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>;
  <path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/>;
  </svg>";

The use of hard-coded SVG is unintuitive since the search icon also appears in the Ionicons font family used everywhere else in Ionic 3. The redundancy misleads us. We incorrectly think that we can customize the icon for an ion-searchbar the same way we would with the ion-icon component.

To use the Ionicon font rather than the hard-coded SVG for the Searchbar icon, add this simple rule to your SCSS:

.searchbar .searchbar-input-container .searchbar-search-icon {
  @extend ion-icon;
  @extend .ion-md-search;
  background-image: none;
  font-size: 2.2rem;
}

In Material Design mode, the ionic-angular SCSS rule for .searchbar-md .searchbar-search-icon contains the hard-coded SVG as the background-image property. We override the background-image with our SCSS rule, assigning it none.

Our SCSS rule overrides the ionic-angular SCSS rule because we are more specific in our selector by adding .searchbar-input-container.

We extend the ionic-angular SCSS rules for ion-icon and the icon class we wish to use in lieu of the hard-coded SVG. In this case, we can just use the same looking search icon .ion-md-search, or we can choose any icon in the Ionicons font family. For example, if we instead choose to @extend .ion-md-globe, our search bar will go from looking like this:

to this:

Finally, we choose a font-size that fits the icon well within the surrounding container. In the above example, 2.2rem resizes the font icon to about the same size as the old SVG icon. You may need to change this value to get it to look the way you want.

*     *     *

If you found this helpful, please leave a comment, consider a small donation, or take a look at some of my work.