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

[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

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

[simonecervini]

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

In my opinion, the primary issue with using the font is the flash of ligature text on slow internet connections.(vercel/next.js#42881 (comment)).

Imagine what a <ListItemIcon /> component might look like showing the text "sentiment_very_satisfied" instead of the correct icon.

Screen.Recording.2023-01-25.at.00.00.50.mov

[rodrigonzalz]

Use font-display: block then it won't show the text before the font is loaded. I've been using Material Symbols with Material UI for months now and 0 problems regarding that.

[simonecervini]

It is true that the font-display: block option is the best choice for icon fonts, however, it does not completely solve the issue. font-display: block gives the font face a longer block period than font-display: swap, font-display-fallback and font-display: optional, but it's typically limited to 2-3 seconds.

You can encounter this problem by simulating slow network conditions in Chrome, such as "Slow 3G" or "Fast 3G" (and obviously disabling the cache).

https://web.dev/font-best-practices/#choose-an-appropriate-font-display-strategy

[rodrigonzalz]

@simonecervini With slow 3g and disable cache the font is not going to be the only thing that takes long to load or that gets partially loaded, the full website will do; so that you get to see the text of the icon is probably the least of your concerns in that scenario.

If I see that the page is loading very slowly, getting partial portions of UI here and there in the span of several seconds, that I see the icon text during that time is not gonna affect me much given the overall state, I can tell the website is loading slowly so it won't surprise to see text replaced by an icon once is done.

Already if you are taking care of slow connections most probably you are already implementing caching, preloading the font, etc; even with all that it will not prevent that to happen 100% if is the user's first time on the page, but it will prevent it for the next times.

I don't see why to make it look like a big deal for something that is not a new issue, that already has ways to be mitigated and that probably you were already handling for other cases (including other fonts).

[simonecervini]

@rodrigonzalz Honestly, I personally see this as a big problem, at least for the use cases I am used to.

We don't all have the same requirements, honestly I very often work with pages that need to perform well even with very slow connections and with this implementation I certainly couldn't use @mui/symbols-material in production (as opposed to the “previous" @mui/icons-material).

I don't see why to make it look like a big deal for something that is not a new issue, that already has ways to be mitigated and that probably you were already handling for other cases (including other fonts).

Honestly, this is not true. Showing text with a different font during slow loads is very different from showing strings like "sentiment_very_satisfied" instead of specific icons.

It is even worse than loading a blank image replaced by the alt text, because often the ligature text of these icon fonts is completely disconnected from the actual icon description (also because it is not designed for that). MUI itself uses the equivalent of the "history_toggle_off" icon on the pricing page to represent the "work in progress" status. It is objectively not okay to show the text "history_toggle_off" on a pricing page, even in a loading phase, even with very slow connections.

With static pages, fonts, and images loaded correctly (with fallback fonts and blurred placeholder images for example), it is possible to create pages that perform perfectly well even with very slow connections, right from the first load without cache. Therefore, no, it is not true that this is a problem we would probably handle anyway.

Maybe these are not everyone's use cases and the tradeoff is acceptable. I am simply expressing my opinion based on my own experiences and usage.

[rodrigonzalz]

@simonecervini Honestly, I think you are under some misunderstanding and that's why you take it as a big issue.

We don't all have the same requirements, honestly I very often work with pages that need to perform well even with very slow connections and with this implementation I certainly couldn't use @mui/symbols-material in production (as opposed to the “previous" @mui/icons-material).

Of course we don't all have the same requirements, and as you say, if the use of font icon doesn't work for you then you always have the option to use the svg icons as you are currently doing.

This issue doesn't say anything about replacing the current icons exclusively with the material-symbols font, that somehow svg icons are gone. As stated in the original issue comment:

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

The whole svg vs font icons tradeoff has been already stated on the documentation since a long time, here. That's why I am saying this is nothing new, neither that such a big issue, you would use what is better for your use case, that's why different options are provided.

[simonecervini]

@rodrigonzalz I understand that this conversation doesn't affect @mui/icons-material at all. If the same flexibility to choose between fonts and SVGs will be maintained for @mui/symbols-material as well, I apologize because I misunderstood.

[tryngl]

Hi there - Was hoping to start using the latest material symbols, as several symbols look new & improved compared to legacy iconography. Great initiative, looking forward to this!

[tphinney]

I will note that if somebody doesn’t like the “flash” of changeover where a whole big ligature collapses to an icon during font loading (FOUT), they could instead reference the icons by codepoints. That would generally result in a single notdef until the icon loads, which might be less disruptive.

I don’t mean to suggest this is a perfect solution, just might be a slightly less disruptive choice, as far as the effect of FOUT.

[cbreezier]

One thing that I don't think has been mentioned yet is theming support. The existing material icons respect the text color and font size set by the theme. Any implementation of the Material Symbols should also respect these settings, regardless of whether it's rendered as a font or an svg.

[N2D4]

In my opinion, the primary issue with using the font is the flash of ligature text on slow internet connections.(vercel/next.js#42881 (comment)).

@simonecervini You can use the codepoints instead (optimally the library would do the transformation):

Screen.Recording.2023-12-07.at.12.18.11.mov

There's some CLS in my video, but there are ways to fix that with a fallback font as well.

I'd like to have fonts over SVG because of the animations, but I'm worried about the 2MB file size if all variants are included (even the 300KB baseline is a lot). Creating an optimized font file at build-time based on whatever icons you imported would be the optimal solution, but that sounds more like a bundler plug-in than a MUI component.

[simonecervini]

In my opinion, the primary issue with using the font is the flash of ligature text on slow internet connections.(vercel/next.js#42881 (comment)).

@simonecervini You can use the codepoints instead (optimally the library would do the transformation):

Screen.Recording.2023-12-07.at.12.18.11.mov
There's some CLS in my video, but there are ways to fix that with a fallback font as well.

I'd like to have fonts over SVG because of the animations, but I'm worried about the 2MB file size if all variants are included (even the 300KB baseline is a lot). Creating an optimized font file at build-time based on whatever icons you imported would be the optimal solution, but that sounds more like a bundler plug-in than a MUI component.

@N2D4 I personally ended up creating a custom script that fetches the SVGs I want from fonts.gstatic.com with the font settings I want, optimize them with SVGR, convert them to react components and compile everything into a single large icons.tsx server component.

This approach works very well with server components since it enables you to create a single large file, without sending all the icons to the client. With the same approach you could also create a <Icon id='arrow_forward' /> component that returns the correct icon from the large file without performance issues.

[RubtsovAV]

Installation

Install the package in your project directory with:

npm install @mui-symbols-material/w400

To install icons of a different weight, simply replace 400 with the desired weight in the installation command.

These components use the Material UI's SvgIcon component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

npm install @mui/material

Usage

Once installed, you can use the icons in your React components:

import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w400'; // Replace 400 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}

Available Weights

The following weights are available, providing a range of design options:

• @mui-symbols-material/w100
• @mui-symbols-material/w200
• @mui-symbols-material/w300
• @mui-symbols-material/w400
• @mui-symbols-material/w500
• @mui-symbols-material/w600
• @mui-symbols-material/w700

Once installed, you can use the icons in your React components. Here's an example showing how to use icons of two different weights:

import React from 'react';
import { FavoriteOutlined as FavoriteRegular } from '@mui-symbols-material/w400'; // Regular weight
import { FavoriteOutlined as FavoriteBold } from '@mui-symbols-material/w700'; // Bold weight

function MyComponent() {
  return (
    <div>
      <FavoriteRegular /> {/* Regular weight icon */}
      <FavoriteBold /> {/* Bold weight icon */}
    </div>
  );
}

[Codex-]

Install the package in your project directory with:

npm install @mui-symbols-material/w400

For transparency, it's worth noting that these packages aren't officially maintained by the mui team but instead @RubtsovAV themself

Repo: https://github.com/RubtsovAV/mui-symbols-material

[RubtsovAV]

@Codex- Thank you. And this is built on the mui-icon package, introducing a fresh collection of Google icons. I believe the MUI team, for version 7, will incorporate symbols, and creating a fork of this package will save them time.

[oliviertassinari]

The Material Design team changed a bit their language with those: https://fonts.google.com/icons?icon.set=Material+Icons

It also seems that some SVGs are available now too, e.g. https://www.npmjs.com/package/@material-symbols/svg-400, source: https://github.com/marella/material-symbols. It looks like we can move forward with this issue, and provide the new icons.

[tphinney]

Yes, the only thing that is wrong on that dropdown menu is that Material Symbols are no longer new, having been available for years now. But the Material Icons are formally deprecated.

[oliviertassinari]

@tphinney Are there plans to rename "Material Symbols" to something like "Material Icons v2"? Similar to how Font Awesome approached this. I suspect that "symbols" confuse a lot of people. I imagined this was already discussed internally.

[tphinney]

As a contractor, it is not generally my place to comment on future plans of Google’s.

But that said, I can explain some background and implications that may not be obvious.

Note that every renaming of the font is going to be treated by all other infrastructure as a DIFFERENT FONT. Basically, you just committed to either building and maintaining a whole additional set of fonts, or to also keeping the last shipping version of the old set around for years to come.

Remember also that Google hosts the fonts by name. If the “v2” is not part of the literal font name, then all existing sites using hosted fonts get automatically swapped to the new icons.

Or, one could put “2” in the literal name. In fact, that is what Adobe just did with Minion 3 and Trajan 3 in recent years. (The initial “Pro” OpenType releases were the virtual version 2, not explicitly named as such.)

BUT... after the “new font” has already been shipping for several years is not the ideal timing for a rename, one really wants to get it right the first time. Renaming it if you are NOT making Big Changes at the same time would be surprising/confusing. Especially when that is a revert to an old name. I think a lot of people would assume that Material Icons 2 was much more similar to Material Icons (v1) than Material Symbols is, and if they still wanted the latest and greatest, they would assume that Material Icons 2 was not the place for that!

Regardless of whether it was Material Icons 2 or Material Symbols, some kind of rename of the font was a Very Good Idea. It isn’t just all the variant icons going away that previously indicated fill status. The new size axis means that the icons will automatically adjust depending on size, so if you were using a 24 px icon at any other size before, it will look different now if you are using the font. Giving the font a different name so that the font does not just swap out on people is good. (And for those people using previously downloaded fonts rather than fonts served by Google, without a rename, they could also have to contend with swaps in the opposite direction: where they are using a new font but somebody else involved in their ecosystem has the same-named old Material Icons font.)

[nikandlv]

@RubtsovAV solution just uses the woff2 and CSS for the icons which is not ideal for me at least. (I want the flexibility of SvgIcon component)

I wrote a rust program that fetches the latest woff2, and redraws each and every icon/glyph inside the font to svg.
Then it transforms them into tsx SvgIcon components.

Most importantly it can update to the latest fonts easily.

It is really really fast! and it runs prettier to make sure the components are formatted correctly

@oliviertassinari
I do not know if mui is planning to use them just as variable fonts or not, but i can share the code which does this if it helps or even write a package for it @mui/material-symbols maybe? :D

[RubtsovAV]

@nikandlv I don't know why you tag me. I also agree that it's not good and that because this package exists #32846 (comment)