I'm setting up Algolia instantsearch.js and I want to replace the default search box submit button icon.
The docs show to style the icon color using the widget class name, but I can't figure out how to replace the svg icon with another svg.
This is the default code that Algolia generates for the submit button icon:
<button class="ais-SearchBox-submit" type="submit" title="Submit the search query."><svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40"> <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path> </svg></button>
Widgets in Algolia's InstantSearch.js come with a predefined rendering. You can style them, but if you're unhappy with the actual rendering (i.e. what HTML is generated for a widget) then you have to create your own.
When it's about customizing an existing widget, which is your case, there's a smart mechanism they provide that is called "connectors".
They've basically decoupled the widget's behaviour/logic from its rendering. Different connectors provide the logic for each search component and widgets bring a UI on top of those connectors.
So in your case, you need to look at the documentation on connectors and go ahead with using a connectSearchBox connector to create your own searchBox widget.