Icons from @mui/icons-material flashing on initial page load with next js page router

[RAllaverdyan-Sorenson]

Steps to reproduce

Link to live example: (required)

Steps:
1.Integrate mui in next js page router as described in docs - https://mui.com/material-ui/guides/nextjs/
2. Use any icon from @mui/icons-material (I used HomeOutlined) in the component.

Current behavior

The used icon flickers on the whole screen on reload and the renders correctly

Expected behavior

No flickering of the icon.

Context

No response

Your environment

System:
OS: macOS 14.2.1
Binaries:
Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
pnpm: Not Found
Browsers:
Chrome: 120.0.6099.216
Edge: Not Found
Safari: 17.2.1
npmPackages:
@emotion/react: 11.11.3 => 11.11.3
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.31
@mui/core-downloads-tracker: 5.15.4
@mui/icons-material: 5.15.3 => 5.15.3
@mui/material: 5.15.3 => 5.15.3
@mui/material-nextjs: 5.15.3 => 5.15.3
@mui/private-theming: 5.15.4
@mui/styled-engine: 5.15.4
@mui/system: 5.15.4
@mui/types: 7.2.13 => 7.2.13
@mui/utils: 5.15.4
@mui/x-date-pickers: 6.18.7 => 6.18.7
@types/react: 18.2.47 => 18.2.47
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
styled-components: 6.1.8 => 6.1.8
typescript: 5.3.3 => 5.3.3

Search keywords: Icon flickering

[siriwatknp]

Please provide a CodeSandbox or a repository that we can reproduce.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.