[SOLVED] Cannot use material-icons-outlined icon in vue quasar?

Cannot use material-icons-outlined icon in vue quasar?

Steps to reproduce:

create a new project with npm init quasar
use scass, ts, vite, all recommended stuff

Add this to quasar.config.js:

    extras: [
      'material-icons', // optional, you are not bound to it
      'material-symbols-outlined',
    ],

In the index page add:

    <q-btn
      label="Not prefixed"
      icon="settings_b_roll"
      type="button"
      color="primary"
    ></q-btn>
    <q-btn
      label="prefixed"
      icon="o_settings_b_roll"
      type="button"
      color="primary"
    ></q-btn>

None of them work. It is this icon: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:settings_b_roll:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=settings_b_roll&icon.size=24&icon.color=%235f6368

Material icons (not symbols-outlined) work fine.

Solution

You may have missed a configuration in the quasar.config.js file.

As stated in the docs you need to have both:

{
  extras: [
    "material-symbols-outlined",
  ],
  framework: {
    iconSet: "material-symbols-outlined",
  },
}

And since you are using materyal_symbols_outlined, the correct way to call them would be with sym_o_, instead of o_:

<q-icon name="sym_o_settings"

You could find reference on how to call them or configure your icons here:

quasar.config.js: https://quasar.dev/options/quasar-icon-sets#quasar-cli-way

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