search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.9k stars 3.51k forks source link

Materials Icon mismatch -- breastfeeding #15344

Closed dost-mmg closed 1 year ago

dost-mmg commented 1 year ago

What happened?

A materials icon (breastfeeding) does not render correctly

What did you expect to happen?

This icon to render: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Abreastfeeding%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048

Reproduction URL

https://codepen.io/kiggs1881/pen/jOpppmq

How to reproduce?

Use breastfeeding as a materials icon

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Plugins (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 16.18.1

Global packages 
  NPM - 9.3.1
  yarn - Not installed
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.11.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.6.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.28 -- Intuitive, type safe and flexible Store for Vue
  vuex - 4.1.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.20.7 -- Babel compiler core.
  webpack - 5.75.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

yusufkandemir commented 1 year ago

You are checking Material Symbols Outlined, but using Material Icons.

You should install Material Symbols Outlined: https://quasar.dev/options/installing-icon-libraries https://github.com/quasarframework/quasar/tree/dev/extras#webfonts

// quasar.config.js
extras: [
  // ...
  'material-symbols-outlined'
]

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

<q-icon name="sym_o_breastfeeding" />