Open Aamir333 opened 11 months ago
Hello @Aamir333, can you please expand more on the issue you are experiencing in relation to Material web?
@e111077 Main issue I been seeing is the material symbols font, for the rest no issues, maybe that's it.
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.
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
@e111077 Nice, that would be awesome!
In the meantime I have created a rudimentary tool to help generate these URLs
https://lit.dev/playground/#gist=0fb96617939dbdb4214ec3ac549ffb06&view-mode=preview
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
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
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
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:
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!
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"></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 :) https://github.com/google/material-design-icons/issues/1201
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.
If you mean what I think you mean by that, yeah it's quite slow to load.