Apply CSS to custom icons

[arnifreyrs]

I just started using Clarity icons fairly recently, and I really like it. However, I am having difficulties in applying css to custom icons. I use renderIcon from @cds/core/icon to add custom icons like this:

const customIcon = renderIcon({
  outline:
'<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2877 2.70002C13.5901 2.70002 12.9156 2.98502 12.4141 3.50113C11.9118 4.01812 11.6252 4.72469 11.6252 5.46669V23.8C11.6252 24.542 11.9118 25.2486 12.4141 25.7656C12.9156 26.2817 13.5901 26.5667 14.2877 26.5667H28.5377C29.2353 26.5667 29.9098 26.2817 30.4113 25.7656C30.9136 25.2486 31.2002 24.542 31.2002 23.8V11.7259C31.2002 11.7258 31.2002 11.7259 31.2002 11.7259C31.2001 11.4702 31.1011 11.2299 30.9329 11.0568L23.0704 2.96435C22.903 2.7921 22.6816 2.70013 22.4565 2.70002C22.4564 2.70002 22.4566 2.70002 22.4565 2.70002H14.2877ZM11.1231 2.2468C11.9579 1.38765 13.0957 0.900024 14.2877 0.900024H22.4565C23.176 0.900183 23.8608 1.19472 24.3613 1.71003M24.3613 1.71003L32.2237 9.80226C32.2237 9.8023 32.2237 9.80223 32.2237 9.80226C32.7235 10.3166 33 11.0089 33.0002 11.7255V23.8C33.0002 25.0029 32.5362 26.1616 31.7023 27.0199C30.8675 27.8791 29.7297 28.3667 28.5377 28.3667H25.8752V31.1334C25.8752 32.3363 25.4112 33.495 24.5773 34.3532C23.7425 35.2124 22.6047 35.7 21.4127 35.7H7.1627C5.97066 35.7 4.83288 35.2124 3.99813 34.3532C3.16423 33.495 2.7002 32.3363 2.7002 31.1334V12.8C2.7002 11.5971 3.16423 10.4384 3.99813 9.58014C4.83288 8.72098 5.97066 8.23336 7.1627 8.23336H9.82519V5.46669C9.82519 4.26377 10.2892 3.10508 11.1231 2.2468M9.82519 10.0334H7.1627C6.46506 10.0334 5.79057 10.3184 5.28913 10.8345C4.78682 11.3514 4.5002 12.058 4.5002 12.8V31.1334C4.5002 31.8754 4.78682 32.5819 5.28913 33.0989C5.79057 33.615 6.46506 33.9 7.1627 33.9H21.4127C22.1103 33.9 22.7848 33.615 23.2863 33.0989C23.7886 32.5819 24.0752 31.8754 24.0752 31.1334V28.3667H14.2877C13.0957 28.3667 11.9579 27.8791 11.1231 27.0199C10.2892 26.1616 9.82519 25.0029 9.82519 23.8V10.0334Z" fill="#333333"/>',
});
ClarityIcons.addIcons(['custom', customIcon])

And now I would like to use CSS to change the fill color of this icon on hover, and I am unable to do so no matter what I try.

Do you have any ideas how to do this?
I am using version 5.0.3 of @cds/core and @cds/react.

[bbogdanov]

Hi @arnifreyrs

https://stackblitz.com/edit/react-ts-qimvzz?file=style.css a quick example to accomplish the color change on hover.

You have to use the https://clarity.design/foundation/icons/api/#icon-css-properties because this is used on a host level to set the icon color.

P.S. The stackblitz playground may not run at the first time and you can resolve that with couple of reloads with DevTools opened

[arnifreyrs]

Hi @bbogdanov and thanks for the quick answer.

Unfortunately, this is not working for a custom icon, as you can see here https://stackblitz.com/edit/react-ts-bk9jqz?file=index.tsx (I updated your example)

[arnifreyrs]

Ah now I managed to solve it. The trick is to have absolutely no fill or stroke part of the custom svg. Thanks @bbogdanov