Content flashes when using any components with an icon before hydration completes

Nobody has claimed this yet.

## Summary of the bug
When refreshing the page using a new app from next.js starter we get a flash when components are loading:

https://github.com/user-attachments/assets/781861fb-bb54-47b3-8067-2f6f94304ada

## 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to page: '...'
2. Click on: '....'
3. Type in: '....'
4. See the error

## 📸 Screenshots or code

Example code:

```tsx
export default function PageInner() {
return (
<>


ICDS Title


ICDS








alert("test")}
>







Get started




Accessibility

Hi

)
}
```

## 🖥 📱 Device
- Type: [e.g. Desktop, mobile]
- Device: [e.g. iPhone, MacBook, ThinkPad]
- OS version: [e.g. macOS13, iOS16, Android 13]
- Browser version: [e.g. Chrome 115, Safari 16]

## 🧐 Expected behaviour
No flash

## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

*Given*
*When*
*Then*

## Additional info
We added some CSS to our project that seems to resolve it
In globals.css add:

```css
/* Don't display the page until it's hydrated to avoid flickering */
html:not(.hydrated) {
display: none;
}
```

Start with the provided Next.js page using IcTopNavigation, IcSearchBar, IcNavigationButton, IcNavigationItem, and SlottedSVG, then inspect the hydration behavior that causes the flash. Compare it with the globals.css workaround using html:not(.hydrated); done means the page renders without visible content flashing before hydration completes.

Written by the indexing model from the issue text.