quasar 2.6.6 → 2.7.2

package/lang/mm.mjs

@@ -0,0 +1,91 @@
+export default {
+  isoName: 'mm',
+  nativeName: 'မြန်မာ(ဗမာ)',
+  label: {
+    clear: 'ရှင်းလင်းမည်',
+    ok: 'အဆင်ပြေသည်',
+    cancel: 'ပယ်ဖျက်မည်',
+    close: 'ပိတ်မည်',
+    set: 'သတ်မှတ်မည်',
+    select: 'ရွေးမည်',
+    reset: 'ပြန်လည်သတ်မှတ်မည်',
+    remove: 'ပယ်ဖျက်မည်',
+    update: 'အသစ်ပြင်ဆင်မည်',
+    create: 'ဖန်တီးမည်',
+    search: 'ရှာမည်',
+    filter: 'စစ်ထုတ်မည်',
+    refresh: 'အသစ်ပြန်လုပ်မည်'
+  },
+  date: {
+    days: 'တနင်္ဂနွေ_တနင်္လာ_အင်္ဂါ_ဗုဒ္ဓဟူး_ကြာသပတေး_သောကြာ_စနေ'.split('_'),
+    daysShort: 'တနင်္ဂနွေ_တနင်္လာ_အင်္ဂါ_ဗုဒ္ဓဟူး_ကြာသပတေး_သောကြာ_စနေ'.split('_'),
+    months: 'ဇန်နဝါရီ_ဖေဖော်ဝါရီ_မတ်_ဧပြီ_မေ_ဇွန်_ဇူလိုင်_သြဂုတ်_စက်တင်ဘာ_အောက်တိုဘာ_နိုဝင်ဘာ_ဒီဇင်ဘာ'.split('_'),
+    monthsShort: 'ဇန်နဝါရီ_ဖေဖော်ဝါရီ_မတ်_ဧပြီ_မေ_ဇွန်_ဇူလိုင်_သြဂုတ်_စက်တင်ဘာ_အောက်တိုဘာ_နိုဝင်ဘာ_ဒီဇင်ဘာ'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'ရက်'
+  },
+  table: {
+    noData: 'ဒေတာမရှိပါ',
+    noResults: 'ကိုက်ညီသောရလဒ်မရှိပါ',
+    loading: 'လုပ်ဆောင်နေသည်',
+    selectedRecords: rows => (
+      rows > 0
+        ? rows + ' ကြောင်းရွေးချယ်ထားသည်'
+        : 'ဘာမှ မရွေးချယ်ထားပါ'
+    ),
+    recordsPerPage: 'တစ်မျက်နှာ အကြောင်းရေတွက်',
+    allRows: 'အားလုံး',
+    pagination: (start, end, total) => start + 'မှ' + end + 'ထိ' + 'အားလုံး' + total + 'ရှိ',
+    columns: 'ကော်လံ'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Bold',
+    italic: 'Italic',
+    strikethrough: 'Strikethrough',
+    underline: 'Underline',
+    unorderedList: 'Unordered List',
+    orderedList: 'Ordered List',
+    subscript: 'Subscript',
+    superscript: 'Superscript',
+    hyperlink: 'Hyperlink',
+    toggleFullscreen: 'Toggle Fullscreen',
+    quote: 'Quote',
+    left: 'Left align',
+    center: 'Center align',
+    right: 'Right align',
+    justify: 'Justify align',
+    print: 'Print',
+    outdent: 'Decrease indentation',
+    indent: 'Increase indentation',
+    removeFormat: 'Remove formatting',
+    formatting: 'Formatting',
+    fontSize: 'Font Size',
+    align: 'Align',
+    hr: 'Insert Horizontal Rule',
+    undo: 'Undo',
+    redo: 'Redo',
+    heading1: 'Heading 1',
+    heading2: 'Heading 2',
+    heading3: 'Heading 3',
+    heading4: 'Heading 4',
+    heading5: 'Heading 5',
+    heading6: 'Heading 6',
+    paragraph: 'Paragraph',
+    code: 'Code',
+    size1: 'Very small',
+    size2: 'A bit small',
+    size3: 'Normal',
+    size4: 'Medium-large',
+    size5: 'Big',
+    size6: 'Very big',
+    size7: 'Maximum',
+    defaultFont: 'Default Font',
+    viewSource: 'View Source'
+  },
+  tree: {
+    noNodes: 'No nodes available',
+    noResults: 'No matching nodes found'
+  }
+}

package/lang/sm.js

@@ -0,0 +1,96 @@
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (sm.mjs).
+ */
+module.exports = {
+  isoName: 'sm',
+  nativeName: 'Fa\'asāmoa',
+  label: {
+    clear: 'Kilia',
+    ok: '\'Oukei',
+    cancel: 'Fa\'alēaogāina',
+    close: 'Tapuni',
+    set: 'Seti',
+    select: 'Filifili',
+    reset: 'Toe seti',
+    remove: '\'Ave\'ese',
+    update: 'Fa\'afou',
+    create: 'Fatu',
+    search: 'Sā\'ili',
+    filter: 'Fa\'amamā',
+    refresh: 'Fa\'afou'
+  },
+  date: {
+    days: 'Aso Sā_Aso Gafua_Aso Lua_Aso Lulu_Aso Tofi_Aso Faraile_Aso To\'onai'.split('_'),
+    daysShort: 'Sā_Gaf_Lua_Lul_Tof_Far_Too'.split('_'),
+    months: 'Ianuari_Fepuari_Mati_\'Aperila_Mē_Iuni_Iulai_\'Aokuso_Sētema_\'Oketopa_Nōvema_Tēsema'.split('_'),
+    monthsShort: 'Ian_Fep_Mat_Ape_Mē_Iun_Iul_Auk_Sēt_Oke_Nōv_Tēs'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'aso'
+  },
+  table: {
+    noData: 'Lēai ni fa\'amatalaga o maua',
+    noResults: 'Lēai ni fa\'amaumauga na maua',
+    loading: '\'Āmatalia...',
+    selectedRecords: rows => (
+      rows === 1
+        ? '1 le laina \'ua filifilia.'
+        : (rows === 0 ? 'Lēai ni' : rows) + ' laina \'ua filifilia.'
+    ),
+    recordsPerPage: 'Laina \'i le ītūlau:',
+    allRows: 'Laina \'uma',
+    pagination: (start, end, total) => start + '-' + end + ' o ' + total,
+    columns: 'Poutū'
+  },
+  editor: {
+    url: 'Tuātusi initaneti',
+    bold: 'Fa\'aolaola',
+    italic: 'Fa\'api\'o',
+    strikethrough: 'Kolosi',
+    underline: 'Vase lalo',
+    unorderedList: 'Lisi \'e fe\'i fa\'atulagaina',
+    orderedList: 'Lisi \'ua fa\'atulagaina',
+    subscript: 'Fa\'anini\'i i lalo',
+    superscript: 'Fa\'anini\'i i luga',
+    hyperlink: 'So\'otaga initaneti',
+    toggleFullscreen: 'Fa\'atelē ma fa\'alititi le va\'ai',
+    quote: 'Saunoaga',
+    left: 'Ōgatasi agavale',
+    center: 'Ōgatasi \'ogātotonu',
+    right: 'Ōgatasi taumatau',
+    justify: 'Ōgatasi lautele',
+    print: 'Lolomi',
+    outdent: 'Fa\'alaititi le va',
+    indent: 'Fa\'atelē le va',
+    removeFormat: '\'Ave\'ese le fa\'atulagaga',
+    formatting: 'Fa\'atulagaga',
+    fontSize: 'Telē o le mata\'itusi',
+    align: 'Ōgatasi',
+    hr: 'Fa\'aopoopo se laina',
+    undo: 'Toe \'ave\'ese',
+    redo: 'Toe fai',
+    heading1: 'Ulutala 1',
+    heading2: 'Ulutala 2',
+    heading3: 'Ulutala 3',
+    heading4: 'Ulutala 4',
+    heading5: 'Ulutala 5',
+    heading6: 'Ulutala 6',
+    paragraph: 'Palakalafa',
+    code: 'Fa\'ailo fa\'akomepiuta',
+    size1: 'Matuā laitiiti',
+    size2: 'Fa\'alaititi',
+    size3: 'Tūlaga masani',
+    size4: 'Lāpo\'a feololo',
+    size5: 'Lāpo\'a',
+    size6: 'Lāpo\'a atu',
+    size7: 'Pito i lāpo\'a',
+    defaultFont: 'Foliga fou ole mata\'itusi',
+    viewSource: 'Va\'ai \'ile tusitusiga fa\'akomepiuta'
+  },
+  tree: {
+    noNodes: 'Lēai ni vāega o maua',
+    noResults: 'Lēai ni vāega na maua'
+  }
+}

package/lang/sm.mjs

@@ -0,0 +1,91 @@
+export default {
+  isoName: 'sm',
+  nativeName: 'Fa\'asāmoa',
+  label: {
+    clear: 'Kilia',
+    ok: '\'Oukei',
+    cancel: 'Fa\'alēaogāina',
+    close: 'Tapuni',
+    set: 'Seti',
+    select: 'Filifili',
+    reset: 'Toe seti',
+    remove: '\'Ave\'ese',
+    update: 'Fa\'afou',
+    create: 'Fatu',
+    search: 'Sā\'ili',
+    filter: 'Fa\'amamā',
+    refresh: 'Fa\'afou'
+  },
+  date: {
+    days: 'Aso Sā_Aso Gafua_Aso Lua_Aso Lulu_Aso Tofi_Aso Faraile_Aso To\'onai'.split('_'),
+    daysShort: 'Sā_Gaf_Lua_Lul_Tof_Far_Too'.split('_'),
+    months: 'Ianuari_Fepuari_Mati_\'Aperila_Mē_Iuni_Iulai_\'Aokuso_Sētema_\'Oketopa_Nōvema_Tēsema'.split('_'),
+    monthsShort: 'Ian_Fep_Mat_Ape_Mē_Iun_Iul_Auk_Sēt_Oke_Nōv_Tēs'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'aso'
+  },
+  table: {
+    noData: 'Lēai ni fa\'amatalaga o maua',
+    noResults: 'Lēai ni fa\'amaumauga na maua',
+    loading: '\'Āmatalia...',
+    selectedRecords: rows => (
+      rows === 1
+        ? '1 le laina \'ua filifilia.'
+        : (rows === 0 ? 'Lēai ni' : rows) + ' laina \'ua filifilia.'
+    ),
+    recordsPerPage: 'Laina \'i le ītūlau:',
+    allRows: 'Laina \'uma',
+    pagination: (start, end, total) => start + '-' + end + ' o ' + total,
+    columns: 'Poutū'
+  },
+  editor: {
+    url: 'Tuātusi initaneti',
+    bold: 'Fa\'aolaola',
+    italic: 'Fa\'api\'o',
+    strikethrough: 'Kolosi',
+    underline: 'Vase lalo',
+    unorderedList: 'Lisi \'e fe\'i fa\'atulagaina',
+    orderedList: 'Lisi \'ua fa\'atulagaina',
+    subscript: 'Fa\'anini\'i i lalo',
+    superscript: 'Fa\'anini\'i i luga',
+    hyperlink: 'So\'otaga initaneti',
+    toggleFullscreen: 'Fa\'atelē ma fa\'alititi le va\'ai',
+    quote: 'Saunoaga',
+    left: 'Ōgatasi agavale',
+    center: 'Ōgatasi \'ogātotonu',
+    right: 'Ōgatasi taumatau',
+    justify: 'Ōgatasi lautele',
+    print: 'Lolomi',
+    outdent: 'Fa\'alaititi le va',
+    indent: 'Fa\'atelē le va',
+    removeFormat: '\'Ave\'ese le fa\'atulagaga',
+    formatting: 'Fa\'atulagaga',
+    fontSize: 'Telē o le mata\'itusi',
+    align: 'Ōgatasi',
+    hr: 'Fa\'aopoopo se laina',
+    undo: 'Toe \'ave\'ese',
+    redo: 'Toe fai',
+    heading1: 'Ulutala 1',
+    heading2: 'Ulutala 2',
+    heading3: 'Ulutala 3',
+    heading4: 'Ulutala 4',
+    heading5: 'Ulutala 5',
+    heading6: 'Ulutala 6',
+    paragraph: 'Palakalafa',
+    code: 'Fa\'ailo fa\'akomepiuta',
+    size1: 'Matuā laitiiti',
+    size2: 'Fa\'alaititi',
+    size3: 'Tūlaga masani',
+    size4: 'Lāpo\'a feololo',
+    size5: 'Lāpo\'a',
+    size6: 'Lāpo\'a atu',
+    size7: 'Pito i lāpo\'a',
+    defaultFont: 'Foliga fou ole mata\'itusi',
+    viewSource: 'Va\'ai \'ile tusitusiga fa\'akomepiuta'
+  },
+  tree: {
+    noNodes: 'Lēai ni vāega o maua',
+    noResults: 'Lēai ni vāega na maua'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.6.6",
+  "version": "2.7.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -27,11 +27,10 @@
     "dev:umd": "node build/script.test-umd.js",
     "dev:quploader": "cd dev/upload-server && yarn && cd ../.. && node dev/upload-server/server.js",
     "build": "node build/script.build.js",
-    "test": "yarn lint && yarn build",
     "lint": "eslint --ext .js,.vue src dev",
     "lint-fix": "eslint --ext .js,.vue src dev --fix",
-    "test:unit": "cd ./dev && cypress open-ct && cd ..",
-    "test:unit:ci": "cd ./dev && cypress run-ct && cd ..",
+    "test:component": "cd ./dev && cypress open-ct && cd ..",
+    "test:component:ci": "cd ./dev && cypress run-ct --record --parallel && cd ..",
     "test:create": "node ./test/cypress/helpers/create-spec.js -c"
   },
   "repository": {
@@ -66,25 +65,26 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^1.0.0-beta.5",
+    "@quasar/app-vite": "^1.0.1",
     "@quasar/extras": "^1.12.0",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.7",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
-    "cssnano": "^5.1.4",
-    "diff": "^5.0.0",
+    "cssnano": "^5.1.12",
+    "diff": "^5.1.0",
     "eslint": "^7.4.0",
-    "eslint-config-standard": "^16.0.2",
+    "eslint-config-standard": "^17.0.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^8.0.0",
     "fast-glob": "^3.2.7",
     "module-alias": "^2.2.2",
     "postcss-rtlcss": "^3.5.3",
@@ -95,8 +95,8 @@
     "rollup": "^2.34.0",
     "table": "^6.0.4",
     "uglify-es": "^3.3.9",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.16",
     "yargs": "^17.3.0"
   },
   "vetur": {

package/src/api.extends.json

@@ -105,6 +105,7 @@
     "model-value": {
       "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "required": true,
+      "syncable": true,
       "category": "model"
     },
 

package/src/components/avatar/__tests__/QAvatar.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@cypress/vue'
-import QAvatar from '../QAvatar'
+import QAvatar from '../QAvatar.js'
 
 describe('Avatar API', () => {
   describe('Props', () => {

package/src/components/badge/QBadge.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { hMergeSlot } from '../../utils/private/render.js'
 
 const alignValues = [ 'top', 'middle', 'bottom' ]
 
@@ -55,6 +55,6 @@ export default createComponent({
       style: style.value,
       role: 'alert',
       'aria-label': props.label
-    }, props.label !== void 0 ? props.label : hSlot(slots.default))
+    }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
   }
 })

package/src/components/badge/__tests__/QBadge.spec.js

@@ -1,5 +1,5 @@
 // import { mount } from '@cypress/vue'
-// import QBadge from '../QBadge'
+// import QBadge from '../QBadge.js'
 
 // const snapshotOptions = { customSnapshotsDir: '../src/components/badge/__tests__' }
 

package/src/components/btn/QBtn.js

@@ -329,10 +329,10 @@ export default createComponent({
       if (props.loading === true && props.percentage !== void 0) {
         child.push(
           h('span', {
-            class: 'q-btn__progress absolute-full overflow-hidden'
+            class: 'q-btn__progress absolute-full overflow-hidden' + (props.darkPercentage === true ? ' q-btn__progress--dark' : '')
           }, [
             h('span', {
-              class: 'q-btn__progress-indicator fit block' + (props.darkPercentage === true ? ' q-btn__progress--dark' : ''),
+              class: 'q-btn__progress-indicator fit block',
               style: percentageStyle.value
             })
           ])

package/src/components/checkbox/use-checkbox.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
@@ -61,22 +61,23 @@ export default function (type, getInner) {
     props.val !== void 0 && Array.isArray(props.modelValue)
   )
 
-  const index = computed(() => (
-    modelIsArray.value === true
-      ? props.modelValue.indexOf(props.val)
+  const index = computed(() => {
+    const val = toRaw(props.val)
+    return modelIsArray.value === true
+      ? props.modelValue.findIndex(opt => toRaw(opt) === val)
       : -1
-  ))
+  })
 
   const isTrue = computed(() => (
     modelIsArray.value === true
       ? index.value > -1
-      : props.modelValue === props.trueValue
+      : toRaw(props.modelValue) === toRaw(props.trueValue)
   ))
 
   const isFalse = computed(() => (
     modelIsArray.value === true
       ? index.value === -1
-      : props.modelValue === props.falseValue
+      : toRaw(props.modelValue) === toRaw(props.falseValue)
   ))
 
   const isIndeterminate = computed(() =>

package/src/components/dialog/QDialog.js

@@ -47,6 +47,7 @@ export default createComponent({
 
     persistent: Boolean,
     autoClose: Boolean,
+    allowFocusOutside: Boolean,
 
     noEscDismiss: Boolean,
     noBackdropDismiss: Boolean,
@@ -351,7 +352,8 @@ export default createComponent({
     function onFocusChange (evt) {
       // the focus is not in a vue child component
       if (
-        portalIsAccessible.value === true
+        props.allowFocusOutside !== true
+        && portalIsAccessible.value === true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus('[tabindex]:not([tabindex="-1"])')

package/src/components/dialog/QDialog.json

@@ -92,6 +92,13 @@
       "desc": "Do not shake up the Dialog to catch user's attention",
       "category": "behavior",
       "addedIn": "v2.1.1"
+    },
+
+    "allow-focus-outside": {
+      "type": "Boolean",
+      "desc": "Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus",
+      "category": "behavior",
+      "addedIn": "v2.7.2"
     }
   },
 

package/src/components/editor/QEditor.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import Caret from './editor-caret.js'
 import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
@@ -400,27 +400,12 @@ export default createComponent({
       }
     }
 
-    function onMousedown () {
+    function onPointerStart () {
       offsetBottom = void 0
     }
 
-    function onMouseup (e) {
+    function onSelectionchange (e) {
       eVm.caret.save()
-      emit('mouseup', e)
-    }
-
-    function onTouchstartPassive () {
-      offsetBottom = void 0
-    }
-
-    function onKeyup (e) {
-      eVm.caret.save()
-      emit('keyup', e)
-    }
-
-    function onTouchend (e) {
-      eVm.caret.save()
-      emit('touchend', e)
     }
 
     function setContent (v, restorePosition) {
@@ -477,6 +462,12 @@ export default createComponent({
       eVm.caret = proxy.caret = new Caret(contentRef.value, eVm)
       setContent(props.modelValue)
       refreshToolbar()
+
+      document.addEventListener('selectionchange', onSelectionchange)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('selectionchange', onSelectionchange)
     })
 
     return () => {
@@ -532,13 +523,8 @@ export default createComponent({
           onFocus,
 
           // clean saved scroll position
-          onMousedown,
-          onTouchstartPassive,
-
-          // save caret
-          onMouseup,
-          onKeyup,
-          onTouchend
+          onMousedown: onPointerStart,
+          onTouchstartPassive: onPointerStart
         })
       ])
     }

package/src/components/file/QFile.js

@@ -103,6 +103,11 @@ export default createComponent({
       disabled: state.editable.value !== true
     }))
 
+    const fieldClass = computed(() =>
+      'q-file q-field--auto-height'
+      + (dnd.value === true ? ' q-file--dnd' : '')
+    )
+
     const isAppending = computed(() =>
       props.multiple === true && props.append === true
     )
@@ -235,7 +240,7 @@ export default createComponent({
     }
 
     Object.assign(state, {
-      fieldClass: { value: 'q-file q-field--auto-height' },
+      fieldClass,
       emitValue,
       hasValue,
       inputRef,

package/src/components/icon/QIcon.js

@@ -29,8 +29,15 @@ const matMap = {
   s_: '-sharp'
 }
 
+const symMap = {
+  sym_o_: '-outlined',
+  sym_r_: '-rounded',
+  sym_s_: '-sharp'
+}
+
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
+const symRE = new RegExp('^(' + Object.keys(symMap).join('|') + ')')
 const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
@@ -135,6 +142,22 @@ export default createComponent({
       else if (ionRE.test(icon) === true) {
         cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substring(3) }`
       }
+      else if (symRE.test(icon) === true) {
+        // "notranslate" class is for Google Translate
+        // to avoid tampering with Material Symbols ligature font
+        //
+        // Caution: To be able to add suffix to the class name,
+        // keep the 'material-symbols' at the end of the string.
+        cls = 'notranslate material-symbols'
+
+        const matches = icon.match(symRE)
+        if (matches !== null) {
+          icon = icon.substring(6)
+          cls += symMap[ matches[ 1 ] ]
+        }
+
+        content = icon
+      }
       else {
         // "notranslate" class is for Google Translate
         // to avoid tampering with Material Icons ligature font
@@ -179,7 +202,7 @@ export default createComponent({
       if (type.value.svg === true) {
         return h('span', data, hMergeSlot(slots.default, [
           h('svg', {
-            viewBox: type.value.viewBox
+            viewBox: type.value.viewBox || '0 0 24 24'
           }, type.value.nodes)
         ]))
       }

package/src/components/icon/QIcon.sass

@@ -2,6 +2,7 @@
   line-height: 1
   width: 1em
   height: 1em
+  flex-shrink: 0
   letter-spacing: normal
   text-transform: none
   white-space: nowrap
@@ -21,14 +22,17 @@
 
   > svg,
   > img
-    width: 1em
-    height: 1em
+    width: 100%
+    height: 100%
 
 .q-icon,
 .material-icons,
 .material-icons-outlined,
 .material-icons-round,
-.material-icons-sharp
+.material-icons-sharp,
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp
   user-select: none
   cursor: inherit
   font-size: inherit

package/src/components/img/QImg.sass

@@ -10,6 +10,7 @@
 
   &__container
     border-radius: inherit
+    font-size: 0
 
   &__image
     border-radius: inherit