Uses default import for @mui/icons-material

[Vallo]

Currently @mui/icons-material does not allow tree-shaking on named imports. When using NextJS HMR this slows down immensely dev time as each page rendered is compiled on file change and this package is including all icons from @mui/icons-material. With this PR the bundle is reduced immensely.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5406167

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[mcintyre94]

Hey @Vallo thanks for this PR! Do you have an example project where this reduces the bundle size?

I tried it out on the packages/starter/material-ui-starter in this repo, and it seemed to slightly increase the bundle size. Running pnpm build

Before (current master):

dist/index.html               355 B    832ms
dist/index.fb20e1d9.css       795 B    240ms
dist/index.5d77111b.js     851.7 KB    2.91s

After (with this change):

dist/index.html                355 B    832ms
dist/index.fb20e1d9.css        795 B    240ms
dist/index.1de3479c.js     874.97 KB    2.96s

That starter definitely might not be representative (looks like it's just rendering the WalletMultiButton) but it'd be good to understand a little more about this.

[Vallo]

hi @mcintyre94 ! this PR is based on this conversation: vercel/next.js#29559 (comment).

I could try create an example project later this week. I am not 100% sure it reduces the bundle size for production builds, but I am sure it is hurting NextJS performance on dev environment.
Also, this PR is the recommended approach for development environments: https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment.

In my project I have copied the library locally and applied this PR, the loading times have been reduced significantly during HMR.

Thank you!

[mcintyre94]

Got it, thanks for the link :) It sounds like this only affects the development environment, so I wouldn't have been testing the right thing with pnpm build. Regardless I agree that this PR is the recommended way of using the icons and if we can make things faster in development with no cost then we should. Thanks again for this!