Quasar: q-icon does not display icon when use font-family

[florensiuslaylim]

Describe problems
I was use q-icon but does not display icon.

Little Background
I created navbar and sidebar and i put some icons at them. But when i was run my project, it does not display the icons.

What i've tried
I removed and followed my codes with the documentation in my template. But it still does not display the icons. I removed my script and style one by one and i got the reason why my icons does not diplay. I was realized it when i remove my font-family and my icons appear in my screen.

Am i got wrong in my app.styl codes?
This is my codes :

app.styl

my font-family location

style in my vue

[yusufkandemir]

q-icon uses web fonts to display icons. As you are overriding it by * { font-family: 'Lato'; }, it will not display as pleased.

If you want to use Lato font as the main font across your application, please refer to documentation for stylus variables. You can add $typography-font-family ?= 'Lato', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif to your src/css/quasar.variables.styl file if you want to achieve that.

If you want to use Lato font across that component only, you can do something like

:not(.q-icon) {
  font-family: 'Lato';
}

instead of the current * { font-family: 'Lato'; } to exclude icons.

[florensiuslaylim]

okey, i see. Thank you so much for your help @yusufkandemir

[rstoenescu]

Thanks for supplying the information, @yusufkandemir . Much appreciate it.