feat(icons): support Material Symbols

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',
+  /* incorrect -> */ delimiter: 'fiber_manual_record', // 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',
+  /* incorrect -> */ ratingFull: 'star',
+  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 }