Loading Material Symbols is Slow

[Aamir333]

No description provided.

[Aworldc]

If you mean what I think you mean by that, yeah it's quite slow to load.

[e111077]

Hello @Aamir333, can you please expand more on the issue you are experiencing in relation to Material web?

[VandeurenGlenn]

@e111077 Main issue I been seeing is the material symbols font, for the rest no issues, maybe that's it.

[e111077]

Heya we are seeing this issue as well, in particular with bundle size of material symbols. There is a method to use the URL API to request the specific symbols you are seeking, but the method is quite cryptic.

Perhaps we should develop a tool to generate those URLs or pitch the fonts team for a more sustainable solution.

[e111077]

I have filed an issue internally to see if the fonts team can add tooling to https://fonts.google.com/icons to help produce URLs that serve only the requested fonts. You can do this now using the ?text=\u${codepoint} to load a specific icon. The codepoint can be found at the bottom of the selected icon:

Here is an example:
https://lit.dev/playground/#gist=b1698e5b55d150393ae3cc29df4e4dad

[VandeurenGlenn]

@e111077 Nice, that would be awesome!

[e111077]

In the meantime I have created a rudimentary tool to help generate these URLs

https://lit.dev/playground/#gist=0fb96617939dbdb4214ec3ac549ffb06&view-mode=preview

[VandeurenGlenn]

I have filed an issue internally to see if the fonts team can add tooling to https://fonts.google.com/icons to help produce URLs that serve only the requested fonts. You can do this now using the ?text=\u${codepoint} to load a specific icon. The codepoint can be found at the bottom of the selected icon:

Here is an example: https://lit.dev/playground/#gist=b1698e5b55d150393ae3cc29df4e4dad

That doesn't do anything tbh load times is still the same as the full set

I made a rollup plugin for it yesterday using it gets ridth of the font and inlines SVG instead

This improves load time by 0,5 to 1 sec

https://github.com/VandeurenGlenn/rollup-plugin-material-symbols

[e111077]

That doesn't do anything tbh load times is still the same as the full set

The link you sent me shows a file of 1.6 kb. Without it it's 3.4 MB

[VandeurenGlenn]

That doesn't do anything tbh load times is still the same as the full set

The link you sent me shows a file of 1.6 kb. Without it it's 3.4 MB

Not sure if I'm following here

[e111077]

I misclicked, particularly talking about this link:

https://lit.dev/playground/#gist=b1698e5b55d150393ae3cc29df4e4dad

the CSS file is the same size, but the font file downloaded is 1.6 kb instead of 3.4MB

Taking a look at your tool, it seems super nifty and useful. 2 suggestions:

1. it could be split up into a bit more focused modules:
   1. one that simply finds the appropriate SVG strings given an icon name + material symbols family
   2. another that injects it into your app
2. This is what the Google Fonts team should be doing and supporting officially but fantastic job at getting something out

[VandeurenGlenn]

Aaah ok I can follow now 😬

Yeah could be good to split up but it's already quite small I think.
Or you suggest to make "helper" modules and use those in the plugin?

There is also a rollup-plugin-md-icon-inline now (just a config including md-icon by default).

Thanks for the feedback!

[jfbrennan]

the link shared above uses the Google Fonts API to pluck specific icons and yes it does return a smaller font file, but it doesn't have the ligatures. hard pass:

You now have to do this
<span class="google-symbols">&#xE8B6;</span>

Not this
<span class="google-symbols">search</span>

There has been a constant demand for the Google Fonts team to provide tooling to create a subset of Material Symbols. Go upvote :) google/material-design-icons#1201

[vdegenne]

Made this little rollup plugin (Vite version is also available): https://www.npmjs.com/package/rollup-plugin-md-icon

It will scan source code and convert names to codepoints and generate a reduced font file for production. Feel free to report any issues on the repository.

[asyncLiz]

This issue isn't actionable by us, but it's got a lot of important info, so I'm going to convert it to a discussion.

Fingers crossed that the fonts API provides more icon font features to help with this.