feat(icons): support Material Symbols

Author: J-Sek

packages/docs/src/pages/en/features/icon-fonts.md

@@ -111,6 +111,60 @@ export default createVuetify({
 
 :::
 
+### Material Symbols
+
+New set of icons provided by Google. Provided as fonts with different weights or SVG. Comes with 3 distinct variants: 'Outlined', 'Rounded' and 'Sharp'.
+
+#### Material Symbols - CSS/Font
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/@material-symbols/[email protected]/outlined.css" rel="stylesheet">
+```
+
+Or as a local dependency:
+
+::: tabs
+
+```bash [pnpm]
+pnpm add @material-symbols/font-400 -D
+```
+
+```bash [yarn]
+yarn add @material-symbols/font-400 -D
+```
+
+``` bash [npm]
+npm install @material-symbols/font-400 -D
+```
+
+```bash [bun]
+bun add @material-symbols/font-400 -D
+```
+
+:::
+
+```js { resource="src/plugins/vuetify.js" }
+import '@material-symbols/font-400/outlined.css' // Ensure you are using css-loader
+import { createVuetify } from 'vuetify'
+import { aliases, mat } from 'vuetify/iconsets/mat'
+
+export default createVuetify({
+  icons: {
+    defaultSet: 'mat',
+    aliases,
+    sets: {
+      mat: mat('outlined'),
+    },
+  },
+})
+```
+
+::: error
+
+This icon set is relatively new and does guarantee full overlap of symbols between variants. You may need to verify that symbols you need look correct or add custom icons to supplement the set you intend to use.
+
+:::
+
 #### MDI - JS SVG
 
 This is the recommended installation when optimizing your application for production, as only icons used for Vuetify components internally will be imported into your application bundle. You will need to provide your own icons for the rest of the app.

packages/vuetify/src/iconsets/mat.ts

@@ -0,0 +1,58 @@
+// Composables
+import { VLigatureIcon } from '@/composables/icons'
+
+// Utilities
+import { h } from 'vue'
+
+// Types
+import type { IconAliases, IconSet } from '@/composables/icons'
+
+const aliases: IconAliases = {
+  collapse: 'keyboard_arrow_up',
+  complete: 'check',
+  cancel: 'cancel',
+  close: 'close',
+  delete: 'cancel', // delete (e.g. v-chip close)
+  clear: 'cancel',
+  success: 'check_circle',
+  info: 'info',
+  warning: 'priority_high',
+  error: 'warning',
+  prev: 'chevron_left',
+  next: 'chevron_right',
+  checkboxOn: 'check_box',
+  checkboxOff: 'check_box_outline_blank',
+  checkboxIndeterminate: 'indeterminate_check_box',
+  delimiter: ['M12 19q-2.925 0-4.962-2.037T5 12t2.038-4.962T12 5t4.963 2.038T19 12t-2.037 4.963T12 19'], // for carousel
+  sortAsc: 'arrow_upward',
+  sortDesc: 'arrow_downward',
+  expand: 'keyboard_arrow_down',
+  menu: 'menu',
+  subgroup: 'arrow_drop_down',
+  dropdown: 'arrow_drop_down',
+  radioOn: 'radio_button_checked',
+  radioOff: 'radio_button_unchecked',
+  edit: 'edit',
+  ratingEmpty: 'star_border',
+  ratingFull: ['m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z'],
+  ratingHalf: 'star_half',
+  loading: 'cached',
+  first: 'first_page',
+  last: 'last_page',
+  unfold: 'unfold_more',
+  file: 'attach_file',
+  plus: 'add',
+  minus: 'remove',
+  calendar: 'event',
+  treeviewCollapse: 'arrow_drop_down',
+  treeviewExpand: 'arrow_right',
+  eyeDropper: 'colorize',
+}
+
+function mat (type: 'outlined' | 'rounded' | 'sharp'): IconSet {
+  return {
+    component: props => h(VLigatureIcon, { ...props, class: `material-symbols-${type}` }),
+  }
+}
+
+export { aliases, mat }