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.

Sign up for GitHub

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

Jump to bottom

Move from material icons to material symbols #1744

Closed
zusorio opened this issue Sep 3, 2024 · 2 comments · Fixed by #1798
Closed

Move from material icons to material symbols #1744

zusorio opened this issue Sep 3, 2024 · 2 comments · Fixed by #1798
Labels
good first issue

Comments

@zusorio
Copy link
Member

zusorio commented Sep 3, 2024

Google's old material icon set is called "Material icons". It's deprecated and no longer gets new icons. The replacement for it is called "Material Symbols". As described in the Angular Material docs, we should move to the new icon set.
@MoritzWeber0
Copy link
Member

There seems to be an issue in Angular Material as well: angular/components#24845

We'd need to replace the woff2 file and add the fontSet attribute to each mat-icon: <mat-icon fontSet="material-symbols-outlined"></mat-icon>. Not sure what the Angular Material plans are to migrate.

@MoritzWeber0
Copy link
Member

Here is also described how to use the class per default on all mat-icons: https://material.angular.io/components/icon/overview#font-icons-with-ligatures

zusorio added a commit that referenced this issue Sep 12, 2024
@zusorio
chore: Update font stack
526ef4d 
Get fonts from fontsource: Removes requirements to check in fonts while still self-hosting them.
Fonts can also receive updates through npm.
Use Roboto in addition to the standard tailwind font stack: Instead of falling back to only
Helvetica Neue and sans-serif, use the tailwind defaults if other fonts could not be loaded.
Add the bold (700) variation of Roboto: Previously, browsers were approximating the bold version.
This caused some weird font rendering issues on bold text.
Move to Material Symbols: Google's old icon font (Material Icons) is deprecated. Theoretically,
Material Symbols also supports a variable version with customizable fill, weight, etc but as this
version is 3MB, I've decided to go with a static version of it.

Closes #1744
@zusorio zusorio mentioned this issue Sep 12, 2024
Merged
@zusorio zusorio moved this from Backlog to Ready for Review in Capella Collaboration Roadmap 🚀 Sep 12, 2024
zusorio added a commit that referenced this issue Sep 12, 2024
@zusorio
chore: Update font stack
2461272 
Get fonts from fontsource: Removes requirements to check in fonts while still self-hosting them.
Fonts can also receive updates through npm.
Use Roboto in addition to the standard tailwind font stack: Instead of falling back to only
Helvetica Neue and sans-serif, use the tailwind defaults if other fonts could not be loaded.
Add the bold (700) variation of Roboto: Previously, browsers were approximating the bold version.
This caused some weird font rendering issues on bold text.
Move to Material Symbols: Google's old icon font (Material Icons) is deprecated. Theoretically,
Material Symbols also supports a variable version with customizable fill, weight, etc but as this
version is 3MB, I've decided to go with a static version of it.

Closes #1744
zusorio added a commit that referenced this issue Sep 12, 2024
@zusorio
chore: Update font stack
9697056 
Get fonts from fontsource: Removes requirements to check in fonts while still self-hosting them.
Fonts can also receive updates through npm.
Use Roboto in addition to the standard tailwind font stack: Instead of falling back to only
Helvetica Neue and sans-serif, use the tailwind defaults if other fonts could not be loaded.
Add the bold (700) variation of Roboto: Previously, browsers were approximating the bold version.
This caused some weird font rendering issues on bold text.
Move to Material Symbols: Google's old icon font (Material Icons) is deprecated. Theoretically,
Material Symbols also supports a variable version with customizable fill, weight, etc but as this
version is 3MB, I've decided to go with a static version of it.

Closes #1744
@zusorio zusorio moved this from Ready for Review to Done in Capella Collaboration Roadmap 🚀 Sep 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue
Projects
Capella Collaboration Roadmap 🚀
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore: Update font stack DSD-DBS/capella-collab-manager
2 participants
@zusorio @MoritzWeber0