CODEWITHSUNDEEP
javascripthtmlcssangularionic2
Richard
Richard

Reputation: 8955

Ionic 2 ion searchbar icon

I am using Ionic2, and have the following ion-searchbar:

enter image description here

Question

Is it possible to change the icon? The default icon is a magnifying glass as you can see, I would like to change it to something else.

Thanks

Upvotes: 0

Views: 4135

Answers (3)

Alex Ljamin
Alex Ljamin

Reputation: 767

If you want to change the search icon to one of the predefined IonIcons you can do something like this:

<ion-searchbar searchIcon="calendar"></ion-searchbar>

More information on the Ionic searchbar official docs.

Upvotes: 0

Suhail Kawsara
Suhail Kawsara

Reputation: 515

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;
}

Upvotes: 2

Ali
Ali

Reputation: 1551

Have you tried to change this variable?

$searchbar-ios-input-search-icon-svg
$searchbar-md-input-search-icon-svg
$searchbar-wp-input-search-icon-svg

Upvotes: 0

Related Questions