Possible to use 'custom' icon in control

[newmanw]

Currently icon is a magnifying glass.

Have you given any thought to adding config to pass in a custom icon?

[vinayakkulkarni]

Was looking for this. at the moment it uses the pseudo classes ::before and ::after to render the magnifying glass. I personally think there should be an API to change it from default pseudo classes to an icon of our choice.

[JamboBuenna]

Hey @vinayakkulkarni Thanks for the information above, we were adding a dark mode that automatically styled this component and the information you provided helped speed this up. The thing that was slowing me down was the image as it had been added as a background-image-svg rather than a straight svg element. Thus your advice confirmed that I'd just have to generate a new icon and override it which can obviously be done with scss or css.

I dunno if this is useful to anyone else but this will automatically add a usable dark mode to an app using leaflet-geosearch

@media (prefers-color-scheme: dark) { .leaflet-control-geosearch { a { background: black !important; } form { background-color: black } .glass { background-color: black; color: white; } .results { background-color: var(--ion-background-color); color: white; :hover { background-color: transparent; } } .leaflet-bar-part::after { background-image: url('/assets/custom-ion-icons/search-outline-white.svg') !important; } .reset { color: white; } } }