Materialdesign: Using icons from @mdi/js imports entire package

[Immugio]

I'm using a few icons from the @mdi/js. The package is added as devDependency and the import is done in this way:

import { mdiFlipHorizontal, .. } from "@mdi/js";

After building the project with webpack this result in approx. 1.6MB extra size added to the output bundle. Is there any way to just import a single icon?

[Templarian]

Does it do this even for a production build?

Might be how your project is configured.

[Immugio]

Does it do this even for a production build?

Might be how your project is configured.

I found a solution, the problem was in the configuration in my tscofig I had "module":"commonjs". The module type needs to be es6 for the tree shaking to work. Thanks

[Templarian]

I'll add this to the documentation after work. Needs a troubleshooting section.

[Templarian]

Added to the docs for webpack. https://dev.materialdesignicons.com/getting-started/webpack

[JapanYoshi]

If you're using @font-face to import the Web font from the online copy, and you know the Unicode code point of the icons you need, you can use the property unicode-range to only import the necessary glyphs. Google Fonts does this to specify the character set you need (e.g. Latin Extended, Devanagari, etc.).
Documentation of unicode-range

[Templarian]

@JapanYoshi This is for the @mdi/js package. I think you might be replying to the wrong issue?

[guyyst]

I'm using "module": "es2020", and I'm still observing the same issue. Just importing and using one icon bumps up the build size by 2.6mb. Going down to es6 is not an option for my at this point.

[Templarian]

@guyyst Can you give more details about your setup? Webpack / Rollup / TS etc?

[Immugio]

I'm using "module": "es2020", and I'm still observing the same issue. Just importing and using one icon bumps up the build size by 2.6mb. Going down to es6 is not an option for my at this point.

@guyyst try this and see if it helps "module": "es6", "moduleResolution": "node",

[guyyst]

I spun up a new angular app on es2020 with nothing but @mdi/js installed and the tree shaking is working properly. I must have misconfigured something in my other project since the package is working just fine 👍

[emileNetter]

Hi I'm using create-react-app and @mdi/js. I'm only using a few icons from @mdi/js but the bundle size is 1.76MB larger (33% of total bundle size) even for production build. So I assume tree shaking is not working. I do not have access to webpack config (because I'm using create-react-app). Have you ever encountered this issue ?

[Templarian]

@emileNetter Seeing the same thing with npm run build ?

[Templarian]

Sorry, too early, can't read you already said that.

[emileNetter]

I use https://www.npmjs.com/package/source-map-explorer to analyze bundle size (after npm run build)

[Templarian]

@emileNetter You're importing only single icons right? import { mdiAccount } from '@mdi/js'; ?

Not really sure what could be happening. It should just work as that uses webpack.

[emileNetter]

Yes I'm only importing single icons like in your example.
I created a new create-react-app from scratch, then installed @mdi/js et @mdi/react and tried importing a few icons. It seems that everything is working fine. With 2 icons imported, @mdi/js size is only 452B. I'll try to investigate further more on my main project

[lpaulger]

@emileNetter I'm running into this problem as well now. Any chance you found the cause?

I've got 29 icons imported and seeing 2.04 MB for @mdi/js inside my bundle when I analyze with https://www.npmjs.com/package/source-map-explorer

[Immugio]

@emileNetter I'm running into this problem as well now. Any chance you found the cause?

I've got 29 icons imported and seeing 2.04 MB for @mdi/js inside my bundle when I analyze with https://www.npmjs.com/package/source-map-explorer

Can you share your setup?