Support Material Symbols (Icon v2)

[oliviertassinari]

Summary 💡

Google has recently introduced a new major iteration on their icon system: Material Symbols: https://material.io/blog/introducing-symbols. This is an awesome new iteration on their icon system, and more importantly, they have made it the default! Proof https://fonts.google.com/icons. This new iteration seems much better.

For SVGs, we might be able to implement the weight with the stroke-width attribute, see: https://feathericons.com/ but we might have to build these SVGs ourselves: google/material-design-icons#1360.

Examples 🌈

• https://developers.google.com/fonts/docs/material_symbols
• feat(material icon): Support for Material Symbols angular/components#24845
• https://github.com/google/material-design-icons

Motivation 🔦

We will need to update our icons to reflect this change, both for font and SVG icons. It's an important step forward in terms of icon

[mvaja13]

Is there anything left in this issue?

[oliviertassinari]

@gautamV19 Everything is left to be done, in case it's something you would like to have a look at.

[ReduceRogue]

@oliviertassinari

here it is a react based material symbols maybe using the same patter to create this iteration of Material Symbols.

https://github.com/ed-software/react-material-symbols

[juliolmuller]

Any plans to include Material Symbols in @mui/icons-material or create a separate package (e.g. @mui/symbols-material) to cover this gap?

[oliviertassinari]

here it is a react based material symbols maybe using the same pattern

@ErreMalote It does work, using https://github.com/marco-prontera/vite-plugin-css-injected-by-js to inject the CSS and Material System font into the page:

import Icon from "react-material-symbols/dist/rounded";

export default function App() {
  return (
    <div className="App">
      <Icon icon="folder" size={24} fill grade={-25} color="red" />
    </div>
  );
}

https://codesandbox.io/s/nifty-poincare-nfduo3?file=/src/App.js

---

I think that it would make sense to have a first experimental API using the font.