Search Bar - Replace Icon with text

Is it possible to replace the icon in the SearchBar component with text? I see there is a submitText config option but the output has the class .sr-only which hides the text by default. Also setting the submitIcon config option to β€œβ€ still renders an icon. Should I handle this via css or is there a way to get this setup through the config?

Thanks!

Hey Marc,

Yes, this is possible! Here is the workaround I was able to come up with:

  1. Utilize the submitText property as you mentioned.
  2. Override the .sr-only class and hide the icon itself with the following CSS in answers.scss:
 .yxt-SearchBar-buttonText {
    display: contents;
  }

 .yxt-SearchBar .Icon {
    display: none;
  }

An example of what this looks like:

Best,
DJ

2 Likes