bug(MatIconButton): Touch Targets are overlapping each other when placed side by side

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

16.2.14

### Description

Placing two mat-icon-buttons side by side just like the angular material doc pages does results in overlapping touch targets. And the user clicks the wrong buttons.
v16.2.14 (of the docs):

v18.1.2 (of the docs):

### Reproduction

Just open the https://v16.material.angular.io/components/button/overview page and compare the button touch target behavior when moving the mouse over the icon buttons with the one of the current version https://material.angular.io/components/button/overview

### Expected Behavior

Icon-Buttons should be separated clearly for the user, and no overlapping should occur.

### Actual Behavior

Even though the mouse pointer is clearly over another button, the neighboring button is already displayed as hovered and is executed when clicked.

### Environment

- Angular: 18.1.2
- CDK/Material: 18.1.2
- Browser(s): Chrome 127.0.6533.73
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Reproduce the behavior by comparing the v16 and current Angular Material button overview pages in Chrome, focusing on adjacent mat-icon-buttons and their hover and click targets. Trace the MatIconButton touch-target behavior from the button component entry point, then verify that neighboring buttons no longer overlap and that each click activates the intended button.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.