Why not pass the onClick prop to Icon in ChakraUI?

[ryanfangk]

I was reading about Icons in ChakraUI and I came across this warning:

"🚨 Avoid passing onClick handlers to icon components. If you need a clickable icon, use the IconButton instead."

Out of curiosity, I wanted to ask: Is there a particular reason why the onClick attribute should be avoided on the Icon element?

Thank you for your response in advance🙏

[noobinthisgame]

Using an IconButton instead of an Icon improves the accessibility of your application :)

[miladkhorramian]

Hi. if you use IconButton instead of Icon itself, you will avoid different layers which an icon tag could have. The IconButton component is a derivative to Button component and will accept all props. Plus, it has some pre-defined styles which you can override easily. If you want to pass onClick to an icon, set the prop "variant" to "unstyled" for IconButton. like this:

<IconButton variant="unstyled" onClick={YOURCLICKHANDLE}  />