Hint: Think about what element a click actually targets first when clicking on a specific, more deeply nested child element, versus its larger, ostensibly clickable ancestor.

When a user clicks on a specific point on the page, the browser determines the click's actual target based on the most specific, deepest element rendered at that exact pixel location, which for a click landing directly on an icon nested inside a button is technically the icon element itself, not the outer button, even though the button is the ancestor that actually has the intended click handler attached to it. In most cases, click events naturally bubble upward from that specific target through its ancestors, including up to the button, so the button's click handler does typically still fire correctly even without pointer-events: none, but certain more specific interactions, like precise hover-state styling that should apply to the button as a whole rather than flickering based on whether the cursor happens to be over the icon versus the surrounding button padding, or drag-and-drop behaviors that care about the exact element being interacted with, can behave inconsistently or undesirably when a nested decorative element like an icon is technically the direct interaction target rather than the outer button. Setting pointer-events: none on the decorative icon removes it entirely from being a possible direct interaction target, ensuring the button itself is always treated as the actual, direct target for any click or hover landing anywhere within its bounds, including precisely on top of the icon, producing more consistent, predictable interactive behavior for the button as a cohesive whole.