[icons] Support converting icons to PNG

[AlbinoGeek]

Steps to reproduce

[ Question doesn't need reproduction. ]

Current behavior

I have also tried ReactDOMServer.renderToString, ReactDOMServer.renderToStaticMarkup, ReactDOM.render and friends to retrieve the SVG string for sharp to convert, which returns an invalid XM Ldocument, crashing sharp. Various issues opened over there.

Expected behavior

We need PNGs for things like email which do not render SVGs.

Context

For context, we have the $600 paid X license.

Not relevant to this ticket, but 🤷🏻

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (128.0.2739.54)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.1.6
    @mui/icons-material: ^6.1.6 => 6.1.6
    @mui/material: ^6.1.6 => 6.1.6
    @mui/material-nextjs: ^6.1.6 => 6.1.6
    @mui/private-theming:  6.1.6
    @mui/styled-engine:  6.1.6
    @mui/system: ^6.1.6 => 6.1.6
    @mui/types:  7.2.19
    @mui/utils:  6.1.6
    @mui/x-data-grid:  7.22.2
    @mui/x-data-grid-premium: ^7.22.2 => 7.22.2
    @mui/x-data-grid-pro:  7.22.2
    @mui/x-internals:  7.21.0
    @mui/x-license:  7.21.0
    @types/react: ^18.3.12 => 18.3.12
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.6.3 => 5.6.3

Search keywords: icon, png, email, inline, embed, sharp, convert

[AlbinoGeek]

For anyone else trying to send an email, or for anything else that requires an image for that matter, but comes from Material-UI Icons... well... I have this horrible RegExp mess for you: lovell/sharp#4271 (comment) --- It "works", the colours are wrong, the result may be fuzzy (use .resize(x, y) before .png()), but it was enough for my use-case.

[DiegoAndai]

Hey @AlbinoGeek! Do you need to convert the SVG in code (programmatically)? Or would downloading the PNGs work? If downloading the PNGs works, have you checked https://fonts.google.com/icons?icon.size=24&icon.color=%235f6368?

[AlbinoGeek]

For my particular use-case, a content management system with a WYSIWYG email template system, I would have the user select MUI icons to place in their email; which I reference as the React components. Therein, I would need a way to programattically exchange the React component for a PNG.

Currently we are using import { renderToString } from 'react-dom/server' for most of the heavy lifting, however, as shown in the code below (copied from my linked issue) I have to inline the SVG styles before converting them into a PNG (as the Mui icons each output a dedicated style block for some reason?)

import Facebook from '@mui/icons-material/Facebook'
import { renderToString } from 'react-dom/server'
import sharp from 'sharp'

const convertSvgToImage = async (
  MuiSvgIcon: typeof Facebook
): Promise<Buffer> => {
  const html = renderToString(<MuiSvgIcon />)
  const css = RegExp(/MuiSvgIcon-root{(.*)}/).exec(html)?.[1] ?? ''
  return await sharp(Buffer.from(html
    .replace(/<style data-emotion[^>]*>.*<\/style>/, '')
    .replace(/class="[^"]*"/, `style="${css}"`)
  )).resize(48, 48).png().toBuffer()
}

// ... later when constructing the `inline` parameter for mailgun ...
const facebookIcon = await convertSvgToImage(Faceboook);

[DiegoAndai]

Thanks for the response, @AlbinoGeek. This is not a use case we support, so I'll add the new feature and waiting for upvotes labels. If you want to work on supporting this and open a PR, I'll be more than willing to review it. I'm sorry I couldn't be of more help. I'll also add the Stack Overflow label if you want to give it a shot over there.

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.