WIP: The SVG icon size in the clear button of the Filter - Search element does not work as expected

Bugs
1

Browser: Chrome 132.0.6834.111
OS: Windows

Hi team,

I’m setting up an SVG icon for the clear button in the Filter - Search element, but there seems to be a problem controlling its size.

As you can see in the screenshot below, there is an icon element and a Filter - Search element. In the icon element, the SVG size is as expected (width and height 20px). But in the Filter - Search element, when I set a size for the icon, the icon is completely hidden.

svg icon
svg icon1919×868 213 KB

Also, for a more detailed review, please see this link.

SVG icon code

<svg data-name="close-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M4 4.8c0-.4.4-.8.8-.8.2 0 .4.1.5.2l14.4 14.4c.3.3.3.8 0 1.1s-.8.3-1.1 0L4.2 5.3C4.1 5.2 4 5 4 4.8z"/><path d="M4 19.2c0-.2.1-.4.2-.6L18.7 4.2c.3-.3.8-.3 1.1 0s.3.8 0 1.1L5.3 19.8c-.3.3-.8.3-1.1 0-.1-.2-.2-.4-.2-.6z"/></svg>

Thank you

2

Hi @HOSEIN,

thank you for your report. I was able to reproduce the issue, and I’ve added it to the internal bug tracker.
It happens as soon as you add some Width to the icon, because we apply a padding to the icon.

image
image1624×644 187 KB

Thank you,
Matej

1 Like
3

Hi @Matej ,

Thanks for looking into this🙏

Yes, you are right. By removing the padding, the icon will stick to the border.

As a suggestion, it would be great if add a position control for the icon, just like the Password toggle icon in the form element.

Screenshot_1
Screenshot_1401×542 20.1 KB

4

Hey @HOSEIN,

yep. Tha could be useful, I’ll add a suggestion to our board, and then we will see. :slight_smile:

Thank you,
Matej

1 Like