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

Can't use star and tour icons at the same time #1818

Open
volago opened this issue Oct 17, 2024 · 2 comments
Open

Can't use star and tour icons at the same time #1818

volago opened this issue Oct 17, 2024 · 2 comments

Comments

@volago
Copy link

volago commented Oct 17, 2024

Hi,

when I don't load whole font collection but only used icons I have a problem with "star" and "tour" icons. None of those two icons are displayed.

Loading:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=favorite,star,tour" />

Usage:

<span class="material-symbols-outlined">star</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">tour</span>

Once I remove "star" from URL, "tour" starts displaying. On other hand when I remove "tour" from URL, "star" starts working.
When URL contains both icons, none is working.

Reproduction (StackBlitz)

Any ideas?

@stephanme
Copy link

I ran into a similar problem using a different icon set. "star" won't work but all other icons are ok.

I first used "star_rate" even though it doesn't look as nice as "star" for my use case. Finally I found out that changing "star" into "star_border" in the font url icon_names parameter fixed the "star" icon. Works as well in your StackBlitz reproduction.

Might have to do something with https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsOutlined%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints#L3138C6-L3139

star f09a
star_border f09a

This brought me to the idea of trying out "star_border". The code point in the file seems questionable. According to https://fonts.google.com/icons?selected=Material+Symbols+Outlined:star:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=star&icon.size=24&icon.color=%23e8eaed the code point for "start" is e838 which is not contained in the codepoints file.

@lamdevhs
Copy link

lamdevhs commented Nov 25, 2024

I first used "star_rate" even though it doesn't look as nice as "star" for my use case. Finally I found out that changing "star" into "star_border" in the font url icon_names parameter fixed the "star" icon. Works as well in your StackBlitz reproduction.

Replacing all the 'star's with 'star_border's fixed the issue for me, thanks for the tip, you've saved me a lot of time! :)
(Just adding 'star_border' to the list of glyphs selected did fix 'star', but star_border works just as well as a star symbol, although when this bug is fixed I might have to switch them back)

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

3 participants