Adding icons to refinement List

Hey guys,

I’m working on filtring a list of products by facets, I would like to add icons to each filter option (screenshot attached), is there a way of having icon URLs indexed to Algolia within products data?
I’m already using connectRefinementList to populate a dynamic list of filters.
Any help is appreciated.
Algolia_Filters

Thanks,

@najoua.chlouchi welcome to the community!

We wouldn’t have a way to index that information along with the product’s data, this would be something that would be better suited to be embedded in your application, in a separate index, or fetched from a remote source.

One way I thought of was you could store a map of facet value to the icon URL:

{
  // "facetName.facetValue": "URL",
  "brand.apple": "https://my-cdn.com/images/brand-apple.png",
  "default": "https://my-cdn.com/images/default.png"
  ...
}

If you add additional facets over time before adding the icon to the file you’ll want a default icon to fall back to.

Happy to help further, let us know! Thanks!

Thanks @michael.king, I’ve added some customizations to get the icons from a cached list and included them in the refinement list component.
Thanks for your help in this.