[docs] Add a section to docs to tell us how can we bundle hundreds of icons of our app into one optimized dependency

[Nefcanto]

Related page

https://mui.com/material-ui/guides/minimizing-bundle-size/

Kind of issue

Missing information

Issue description

For small projects, developers may use fewer than 50 icons. In our project, we see that over 2000 files are being loaded in the Network tab.
When we filter the requests using @mui, we see that more than 300 lines are related to the MUI icons.

So, MUI Icons are not efficient now in our large application. We thought of two solutions:

1. Importing everything (import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';). This is not good because we would force upon ourselves more than 1700 more icons.
2. Adding icons to the optimizeDeps in Vite to make them into a one bundle.

Option two seemed to be a better option. We created a findIcons method:

import { execSync } from "child_process"

export function findIcons() {
    try {
        const output = execSync(
            `grep -rhoE "@mui/icons-material/[A-Za-z0-9]+" ./src | sort | uniq`,
            { encoding: "utf-8" }
        )
        return output
            .split("\n")
            .map(i => i.trim())
            .filter(Boolean)
    } catch (error) {
        console.error("Failed to find MUI icons:", error)
        return []
    }
}

And added them to the optimizedDeps:

const icons = findIcons()
// ...
        optimizeDeps: {
            include: [
                ...icons,
            ]
        },

Then we used DEBUG:vite.deps environment variable to see the optimization process. And we ended up each icon being separately optimized into one file, again leaving us with more than 300 requests.

7:32:45 AM [vite] (client) Forced re-optimization of dependencies
  vite:deps (client) removing old cache dir /Project/AdminPanel/node_modules/.vite/deps +0ms
  vite:deps scanning for dependencies... +0ms

  VITE v7.0.0  ready in 2008 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.18.0.2:5173/
  vite:deps ✨ static imports crawl ended +57ms
  vite:deps Crawling dependencies using entries: 
  vite:deps   /Project/AdminPanel/index.html +0ms
  vite:deps Scan completed in 2120.52ms: 
...
  vite:deps   @mui/icons-material/Abc -> /Project/AdminPanel/node_modules/@mui/icons-material/esm/Abc.js
  vite:deps   @mui/icons-material/AcUnit -> /Project/AdminPanel/node_modules/@mui/icons-material/esm/AcUnit.js
  vite:deps   @mui/icons-material/AccessTime -> /Project/AdminPanel/node_modules/@mui/icons-material/esm/AccessTime.js
  vite:deps   @mui/icons-material/AccountBalance -> /Project/AdminPanel/node_modules/@mui/icons-material/esm/AccountBalance.js

So, we're stuck now. What should we do? The docs do not suggest anything for this scenario.

• Having hundreds of icons is not efficient if each is loaded separately (because they are third-party dependencies, and there is no need for HMR)
• Including all 2000+ icons is not feasible to solve that problem
• When we include them in the optimizedDeps, we see them each separately being optimized into a separate file, still leaving us with hundreds of requests.

Please add a section to the optimization page, and tell us your approach to optimized a few hundred icon imports.

Context

No response

Search keywords: icons-material optimizeDeps

[siriwatknp]

I assume that this issue is specific to Vite. Please share your vite.config.ts as it crucial for us to reproduce.
It'd be even better if you provide a reproducible repo that we can take a look.

[Nefcanto]

@siriwatknp thank you for responding. I don't understand why it needs a reproducible repo. A reproducible repo would not be a minimal repo after all, because it imports hundreds of icons (maybe 300 or 400). But the explanation is very clear. There should be an efficient way between "full import of all icons" and "importing a couple of icons".

Right now, our only way is this:

• Finding all icons in our code (by regular expressions)
• For each icon, finding the icon in the MUI path
• Creating an AST from its code
• Extracting the SVG from it
• Inlining all SVGs inside a file called "Icons.jsx"
• Importing icons from that file

import fs from "fs"
import path from "path"
import { execSync } from "child_process"
import { parse } from "@babel/parser"
import traverseModule from "@babel/traverse"

const traverse = traverseModule.default

export function findIcons() {
    const command = `grep -rhoE "@mui/icons-material/[A-Za-z0-9]+|Icons\\.[A-Za-z0-9]+|icon[=:]\\s*[\\"\\'][A-Za-z0-9]+[\\"\\']" ./src`

    const grepResult = execSync(command, { encoding: "utf-8" })

    const matches = grepResult
        .split("\n")
        .map(line => line.trim())
        .filter(Boolean)

    const iconNames = matches.map(line => {
        if (line.startsWith("@mui/icons-material/")) return line.split("/").pop()
        if (line.startsWith("Icons.")) return line.split(".").pop()
        const match = line.match(/icon[=:]\s*["']([A-Za-z0-9]+)["']/)
        return match ? match[1] : null
    }).filter(Boolean)

    const uniqueIcons = Array.from(new Set(iconNames))
    let validIcons = []

    for (const name of uniqueIcons) {
        const filePath = path.resolve("node_modules/@mui/icons-material", `${name}.js`)
        if (!fs.existsSync(filePath)) {
            console.warn(`⚠️ Icon not found: ${name}`)
            continue
        }

        const code = fs.readFileSync(filePath, "utf-8")
        const svg = generateSvg(code, name)
        if (!svg) continue

        const component = wrapComponent(name, svg)
        validIcons.push({ name, code: component })
    }
    validIcons = validIcons.sort((a, b) => a.name.localeCompare(b.name))

    writeIconsFile(validIcons)
    console.log(`✅ Wrote ${validIcons.length} icons to src/Icons.jsx`)
    return validIcons.map(i => i.name)
}

function generateSvg(iconCode, iconName) {
    const svgAttributes = {
        viewBox: "0 0 24 24",
        fill: "currentColor",
    }

    let ast
    try {
        ast = parse(iconCode, {
            sourceType: "module",
            plugins: ["jsx"]
        })
    } catch (error) {
        console.error(`❌ Failed to parse ${iconName}: ${error.message}`)
        return null
    }

    const elements = []

    traverse(ast, {
        CallExpression(path) {
            let callee = path.node.callee
            if (callee.type === "SequenceExpression") {
                callee = callee.expressions[callee.expressions.length - 1]
            }

            const isCreateSvgIcon = (
                callee.type === "MemberExpression" &&
                callee.object.name === "_createSvgIcon" &&
                callee.property.name === "default"
            )

            if (!isCreateSvgIcon) return

            const arg = path.node.arguments[0]

            if (arg.type === "ArrayExpression") {
                arg.elements.forEach(element => {
                    const jsxCall = extractJsxCall(element)
                    if (jsxCall) elements.push(jsxCall)
                })
            } else if (arg.type === "CallExpression") {
                const jsxCall = extractJsxCall(arg)
                if (jsxCall) elements.push(jsxCall)
            }
        }
    })

    if (elements.length === 0) {
        console.warn(`⚠️ No JSX extracted for: ${iconName}`)
        return null
    }

    let svg = `<svg ${Object.entries(svgAttributes)
        .map(([k, v]) => `${k}="${v}"`)
        .join(" ")}>\n`

    for (const { tag, attributes } of elements) {
        const attrString = Object.entries(attributes)
            .map(([k, v]) => `${k}="${v}"`)
            .join(" ")
        svg += `    <${tag} ${attrString}/>\n`
    }

    svg += "</svg>"
    return svg
}

function extractJsxCall(callExpr) {
    if (!callExpr || callExpr.type !== "CallExpression") return null

    let callee = callExpr.callee
    if (callee.type === "SequenceExpression") {
        callee = callee.expressions[callee.expressions.length - 1]
    }

    const isJsxCall =
        (callee.name === "_jsxRuntime.jsx") ||
        (callee.type === "MemberExpression" &&
            callee.object.name === "_jsxRuntime" &&
            callee.property.name === "jsx")

    if (!isJsxCall) return null

    const [tagNode, propsNode] = callExpr.arguments
    if (!tagNode || tagNode.type !== "StringLiteral") return null
    if (!propsNode || propsNode.type !== "ObjectExpression") return null

    const attributes = {}
    for (const prop of propsNode.properties) {
        if (prop.type === "ObjectProperty" && prop.key.type === "Identifier") {
            const key = prop.key.name
            const value = prop.value.type === "StringLiteral"
                ? prop.value.value
                : prop.value.raw
            attributes[key] = value
        }
    }

    return { tag: tagNode.value, attributes }
}

function wrapComponent(name, svgContent) {
    const [firstLine, ...rest] = svgContent.trim().split("\n")
    const svgOpen = firstLine.replace("<svg", `<svg {...props}`)
    const svgBody = [svgOpen, ...rest].join("\n")
    return `const ${name} = props => ${svgBody}`
}

function writeIconsFile(icons) {
    const lines = ['import React from "react"\n']

    for (const { code } of icons) {
        lines.push(code, "")
    }

    lines.push("const Icons = {")
    for (const { name } of icons) {
        lines.push(`    ${name},`)
    }
    lines.push("}\nexport default Icons\n")

    const output = path.resolve("src", "Icons.jsx")
    fs.mkdirSync(path.dirname(output), { recursive: true })
    fs.writeFileSync(output, lines.join("\n"))
}

As you might imagine, we call this inside our "vite.config.js" before returning the config. But if we don't do it, then we end up with hundreds of requests. Not efficient at all.

This is a sample of our generated "Icons.jsx" file:

const PeopleAlt = props => <svg {...props} viewBox="0 0 24 24" fill="currentColor">
    <path fillRule="evenodd" d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87"/>
    <circle cx="9" cy="8" r="4" fillRule="evenodd"/>
    <path fillRule="evenodd" d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24C14.5 5.27 15 6.58 15 8s-.5 2.73-1.33 3.76c.42.14.86.24 1.33.24m-6 1c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"/>
</svg>

const Percent = props => <svg {...props} viewBox="0 0 24 24" fill="currentColor">
    <path d="M7.5 11C9.43 11 11 9.43 11 7.5S9.43 4 7.5 4 4 5.57 4 7.5 5.57 11 7.5 11m0-5C8.33 6 9 6.67 9 7.5S8.33 9 7.5 9 6 8.33 6 7.5 6.67 6 7.5 6M4.0025 18.5832 18.59 3.9955l1.4142 1.4143L5.4167 19.9974zM16.5 13c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5m0 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5"/>
</svg>

const Person = props => <svg {...props} viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/>
</svg>

And we export it this way:

const Icons = {
    PeopleAlt,
    Percent,
    Person,
}

export default Icons

And after adding an alias for it, we use it this way:

import Icons from "Icons"
const action = <Action icon={Icons.Person} />
// or
const action = <Action icon="Percent" />

Works like a charm. And there are no more than 300+ separate requests to be made for icons, slowing our panel. One big file outweighs it.