Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual difference between icons from full package and individual weight package #34

Open
sream opened this issue May 8, 2024 · 5 comments

Comments

@sream
Copy link

sream commented May 8, 2024

As visible within the node screenshots of buttons there is a difference in default configuration. Both are supposed to be weight 400/rounded.

From individual package:

localhost_4200_login

From full package:

derifin dericon it_login

@UnseenMadness
Copy link

same issue for us as well

@MelanieW97
Copy link

MelanieW97 commented Aug 13, 2024

Same here!

Font 400 package:
image

Full package:
image

Both are supposed to be weight 400 since the full package is supposed to be default font 400. I have not changed anything.

If I compare that to the icon on the Google website, the font 400 package version looks more like the font 100 one.

image

@MelanieW97
Copy link

MelanieW97 commented Aug 13, 2024

No idea if that might help locating the problem but the problem seems to be in the woff2 file. I thought I could patch it myself if the error occured in a stylesheet but the woff2 file is already broken.

Full package with font weight 400:
image

Font weight 400 package:
image

I guess the font weight 400 package falsely selects font weight 100.

Edit: Okay, no. The package does select the font weight 400 package but it uses size 48px. That might be the problem if you shrink the icon back to default 24px. I've just downloaded the woff2 files myself with size 24px and then it looks perfectly fine. The 48px size seems to be the problem.

@vaarga
Copy link

vaarga commented Jan 15, 2025

I have the same issue.

What I found interesting is that I also downloaded the full package and tried changing the weight by testing all the possible options. However, none of them matched the individual weight package (@material-symbols/font-400). I also tried changing the size from the default 24px to 48px, but there were still visible differences between the two.

As a suggestion (and I plan to do the same), try using @material-symbols/font-600. While it is not exactly the same, the differences, in my personal opinion, are negligible.

Both versions are 0.27.2.

@MikeSam
Copy link

MikeSam commented Jan 23, 2025

As a suggestion (and I plan to do the same), try using @material-symbols/font-600. While it is not exactly the same, the differences, in my personal opinion, are negligible.

I agree they look pretty much the same, except icons more_vert, more_horiz. They are much thinner (in 400, 600, even 700 versions), than in the full version. I guess this is because individual packages were exported with static value of Optical Size: 48 and it's not possible to change it.

@marella why do you use "opsz" 48 for individual packages? Google Font site shows 24 by default.

Image

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants