Option to use custom icon for search

[PulkitBanta]

Description

There should be a way to use custom icon for the search bar instead of the default icon provided.

I am trying to change the color and size of the icon but that is not possible as of now and in the rendered DOM I cannot see the icon. Is there a way to customize the default icon?

[tcy1999]

I was also trying to customize the search icon, and solved it by setting the --ifm-navbar-search-input-icon in the global css file of my site. For example,

:root {
  ...
  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px">...</svg>');
}
  ...

Hope this helps.

[paolochang]

Hi @tcy1999, Could you give me an example of color changing using variable based on your sample code block? I was able to change the color by adding name of the color like "red", "lime", but not with hex color code or variable.

[MichelHMachado]

To change the color dynamically using a variable or a hex color code, you need to utilize URL encoding for the color within the SVG's fill attribute. This ensures that special characters like "#" are properly represented in URLs and code.

For example, if you want to change the fill color of the SVG icon to a specific hex color code, such as "#FF5733", you would need to URL-encode it as follows:

background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF5733" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');

Use the %23 instead of #