q-btn icon rendered outside the button?

[mekterovic]

Hi quasar gurus,

I have this code (I have 'material-icons' in the extras array in quasar.config.js):

<q-btn
  @click="runAllTestCases"
  label="Run all test-cases"                
  icon="settings_b_roll"
  type="button"
  color="primary"
></q-btn>

and it gets rendered outside the button:

If I remove the the q-icon class from the rendered <i> element:

<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<i class="material-icons" aria-hidden="true" role="img">settings_b_roll</i><span class="block">Run all test-cases</span>
</span>

the border streches out and I get this (still ugly):

Are these two styles clashing?

This does not happen with all icons, if I change to eg. keyboard_arrow_up things are fine:

On a related issue, some material icons work, and some don't, they simply do not show up.
It seems something is off with my icons setup, but I did nothing but enable it in the config file.

I have this in my html's head tag:

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp"
      rel="stylesheet"
      type="text/css"
    />

[yusufkandemir]

First of all, Quasar CLI handles including the webfont files for you when you use quasar.config file > extras. So, please remove <link href="https://fonts.googleapis.com/.... Quasar extras also makes sure that the fonts/icons/etc. are available when offline, e.g. PWA offline mode, Electron apps, Capacitor apps, etc.

On a related issue, some material icons work, and some don't, they simply do not show up.

You are probably using https://fonts.google.com/icons to check out icons. But, there is one small but very important detail; it shows Material Symbols icons by default.

make sure you choose Material Icons, when you are using Material Icons in your app

Please note that Quasar also supports Material Symbols, in case you want to switch to it.

When you address this, all the problems you mentioned will go away.

[rstoenescu]

Depending on the actual string of the icon, it can interpret it as multiple ones (out of which some may be missing) and mess it up just like in your case.

[mekterovic]

Thank you.
Is it possible to use both?

I've tried switching to 'material-symbols-outlined' bcs icons is deprecated, but it does not work:

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

...
iconSet: 'material-symbols-outlined'

I get text instead of icons, like this guy: #13473

ALso, is there a prefix for the 'material-symbols-outlined'?
There is nothing about it here: https://github.com/quasarframework/quasar/tree/dev/extras#qicon-cheatsheet

[yusufkandemir]

@mekterovic yes, you can keep material-icons and material-symbols-*(outlined, etc.) in extras. The icons are distinguished by their prefixes.

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

[yusufkandemir]

So, for your initial example:
settings_b_roll is from Material Symbols. To use the outlined variant, you would do icon="sym_o_settings_b_roll"