Missing material symbols?

[lupodellasleppa]

What happened?

I am on the latest version (v2.17.1), and want to use Material Symbols arrow_menu_open and arrow_menu_close.

I am using <q-btn icon="sym_o_arrow_menu_open"/> (and variant with _close)

Instead of the icon, I'm getting mixed string/icon (see screenshot)

<q-btn icon="sym_o_arrow_menu_open" />

<q-btn icon="sym_o_arrow_menu_close" />

I have been using Quasar for a while. I have material-symbols-outlined in my quasar.config.js. I have also tried importing rounded and sharp symbols and using them with sym_r_ or sym_s_. All other icons are working fine, so I'm guessing there's an issue particular with these two (at least)

What did you expect to happen?

The icons to be rendered like these

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:arrow_menu_open:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=arrow+menu+open&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:arrow_menu_close:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=arrow+menu+close&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-2mlg5g?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Go to provided link
2. at index page, examples of working icons, then faulty icons

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(6.8.0-48-generic) - linux/x64
NodeJs - 22.11.0

Global packages
  NPM - 10.9.0
  yarn - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.10.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.12 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.5
  pinia - 2.2.5 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 9.13.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - kintoun-31
  eno1 - 192.168.1.155
  br-b86356fc3197 - 172.18.0.1

Relevant log output

No response

Additional context

No response

[yusufkandemir]

It is possible, @quasar/extras is outdated. It has CDN v195, whereas the latest is v215 as can be seen below.

https://github.com/quasarframework/quasar/tree/dev/extras#webfonts

[yusufkandemir]

The updates are available in @quasar/extras v1.16.13