TIP: Making icons easier to program and easier to click

Hi Judy,

I hope you don’t mind me adding my observation about transparent parts of icons here. It’s closely related and might help clarify things further.

Allowing an SVG icon downloaded from the content library, whether it consists of a single shape or multiple freeform shapes, to respond only to clicks on its visible parts (and not transparent areas) can be addressed globally with a small JavaScript snippet. This snippet can be injected once per slide or at the Slide Master level, no matter how many icons are present.

var objects = document.querySelectorAll('.slide-object g.eventable');
objects.forEach(object => {
	object.style.pointerEvents = 'bounding-box';
})

By default, SVG groups with the class "eventable" are set to pointer-events: visiblePainted, which means only the visible painted parts of the SVG respond to mouse events. So, when users accidentally click on transparent parts inside the SVG bounding box, it is causing unexpected behavior.

Switching to pointer-events: bounding-box changes the behavior so the entire bounding box of the SVG element becomes clickable, including transparent areas inside that box. 

However, there is a known bug reported in Firefox where pointer-events: bounding-box is simply rejected, so this solution may not work consistently in Firefox.

Edit:
Simple file attached for reference.