How to render the filled version of material symbols?

[Nick-Riggs]

I am looking for the best (quasar) way of rendering the filled version of a material symbol for a QIcon component.

instead of

Seemingly, the quasar.config file doesn't support it, nor do any props/styles I give QIcon achieve it.

Any ideas are appreciated. Thank you.

[opsec-infosec]

I too am facing this issue, there seems to be no way to fill icons using q-icon or button. I have to revert to material-icon instead of material-symbol-icon.

[ivanjaros]

https://quasar.dev/vue-components/icon#webfont-usage

do not use the outlined version, should be pretty straightforward.

[7RST1]

Looks like there is no filled icon pack for material symbols, only material icons

[7RST1]

Found out the icons now support fill via css feature settings;
font-variation-settings: 'FILL' 1;

[damvaz]

.q-icon {
  font-variation-settings:
    'FILL' 1, // 0 = off; 1 = on
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

Suggestion: use css custom props or sass variables for a clean control ✨