Support Material Symbols (Icon v2)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

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: https://github.com/google/material-design-icons/issues/1360.

Examples 🌈

• https://developers.google.com/fonts/docs/material_symbols
• https://github.com/angular/components/issues/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

[ErreMalote]

@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

[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.