search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.71k stars 3.49k forks source link

Mention variable fonts in disadvantages of using SVG icons #16803

Open w0pp opened 7 months ago

w0pp commented 7 months ago

Description

The only disadvantage of using SVG icons that is mentioned in the docs is this:

The current disadvantage is that it is more tedious to use these icons than their webfont counterpart.

However, there's another disadvantage: it makes it impossible to change the settings for variable fonts like Material Symbols. This means you can't specify whether an icon should be filled or not, what weight it should have etc because you'd need to use the font-variation-settings CSS property for that.

Example: font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;

I see two possible solutions here: fix the docs or add filled Material Symbols SVGs. The latter is of course not a perfect solution because then you still couldn't control the weight and other settings.

Documentation Section URL

https://quasar.dev/vue-components/icon#svg-icons

Flavour

None

Areas

Components (quasar)

loyaj commented 7 months ago

I too was just looking for the filled material symbols svgs. If those could be added, that would be a partial win that would get us going.