Change the icon of the SearchBar?

Ionic Framework ionic-v3
1

Is there a way to change the icon in the search bar place holder? (In this case I want to use it for a url entry field)

1 Like
3

The search icon on searchbar is set through background-image css property wich is an SVG format by default you can overwrite it in (src/theme/variables.scss) file and set your own SVG path.

Another solution is by adding font-awesome to the application first, then add the following to css customization in variables.scss file:

.searchbar-md .searchbar-search-icon::before {
font-family: ‘FontAwesome’;
content: “\f0c1”;
}
Note: You can add your custom class selector, so that it doesn’t affect all searchbars

4

On ionic 3 i used “searchbar-search-icon” on Variables.scss and worked for me.

.searchbar-search-icon {
background-image: url("…/assets/imgs/send-button.svg")!important;
}