Add onClick event to Svg Icon

Learn
1

Hi, I’m using icons from

https://package.elm-lang.org/packages/danmarcab/material-icons/latest/

But, can’t figure out how to add onClick events to the icon.

Appreciate any pointers.

Thanks,
Cliff

2

One way appears to be to wrap it in a 

span [ onClick (EditDevice dev.id) ] [ edit Color.darkGrey 30 ]

Is this the best way to do something like this?

3

I’d recommend wrapping your icon in a <button type="button"> element, and adding your onClick to that. Then you get some nice accessibility wins as well:

  • It is focusable by pressing Tab.
  • When focused, it can be activated by pressing Space or Enter.
  • Screen readers will announce the element as a button.
  • Browser extensions such as Vimium can find it.

You might need to remove some styling from the <button> element to get your desired look.

Also consider adding a title="..." or aria-title="..." if the button contains only an icon, to help screen reader users understand what it’s for.

4 Likes
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.