From 1ab91589f8ce532645084479a5d6bf73587ce92a Mon Sep 17 00:00:00 2001
From: Vasyl <vasyl.hryha@epicmax.co>
Date: Tue, 12 Dec 2023 17:56:21 +0200
Subject: [PATCH 1/5] - feat: update google fonts to material symbols

---
 packages/docs/nuxt.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index b9036e0405..8310fab361 100644
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -107,6 +107,7 @@ export default defineNuxtConfig({
       },
       'Material+Icons': true,
       'Material+Icons+Outlined': true,
+      'Material+Symbols+Outlined': true,
     },
   },
 

From 00c7eb6cd8618b8e8738a3ee9d7ae54a2fabd16a Mon Sep 17 00:00:00 2001
From: Vasyl <vasyl.hryha@epicmax.co>
Date: Tue, 12 Dec 2023 18:08:46 +0200
Subject: [PATCH 2/5] - feat: update google fonts to material symbols

---
 packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts | 3 ++-
 packages/nuxt/src/composables/use-css.ts                  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts b/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts
index 2a3e51d510..2d68dc2333 100644
--- a/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts
+++ b/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts
@@ -41,7 +41,8 @@ export const addVuesticToVue3App = async () => {
   let htmlSource = await readFile(htmlPath, 'utf-8')
   htmlSource = insertHead(htmlSource, [
     `<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">`,
-    `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+    `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`,
+    `<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">`
   ])
   await writeFile(htmlPath, htmlSource)
 }
diff --git a/packages/nuxt/src/composables/use-css.ts b/packages/nuxt/src/composables/use-css.ts
index 3be135517f..a4012f2e1d 100644
--- a/packages/nuxt/src/composables/use-css.ts
+++ b/packages/nuxt/src/composables/use-css.ts
@@ -4,7 +4,8 @@ import type { VuesticOptions } from "../types";
 
 const VUESTIC_DEFAULT_FONTS = [
   { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap' },
-  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=swap' }
+  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=swap' },
+  {rel: 'stylesheet', href: '(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined' }
 ]
 
 const registerDefaultFonts = (nuxt: Nuxt) => {

From 1f7c2ccce8be886ed8ad7a511f7292fd558ab186 Mon Sep 17 00:00:00 2001
From: Vasyl <vasyl.hryha@epicmax.co>
Date: Fri, 15 Dec 2023 17:03:23 +0200
Subject: [PATCH 3/5] - fix: delete `Material Icons`

---
 packages/docs/nuxt.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index 8310fab361..428fd98b03 100644
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -105,8 +105,6 @@ export default defineNuxtConfig({
       'Source+Code+Pro': {
         wght: [400],
       },
-      'Material+Icons': true,
-      'Material+Icons+Outlined': true,
       'Material+Symbols+Outlined': true,
     },
   },

From 0a020716d4e25d47680a34b96ce1506f4fc248d5 Mon Sep 17 00:00:00 2001
From: Vasyl <vasyl.hryha@epicmax.co>
Date: Sat, 16 Dec 2023 14:47:11 +0200
Subject: [PATCH 4/5] - fix: delete `Material Icons`

---
 packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts b/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts
index 2d68dc2333..737ccc327a 100644
--- a/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts
+++ b/packages/create-vuestic/src/steps/2.addVuestic/vue-app.ts
@@ -41,7 +41,6 @@ export const addVuesticToVue3App = async () => {
   let htmlSource = await readFile(htmlPath, 'utf-8')
   htmlSource = insertHead(htmlSource, [
     `<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">`,
-    `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`,
     `<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">`
   ])
   await writeFile(htmlPath, htmlSource)

From f18c09e7fa146bebd02721d3981c3edd4ed7407f Mon Sep 17 00:00:00 2001
From: Vasyl <vasyl.hryha@epicmax.co>
Date: Wed, 27 Dec 2023 13:16:16 +0200
Subject: [PATCH 5/5] - fix: move to Material+Symbols+Outlined everywhere -
 delete: Material+Icons

---
 packages/docs/assets/icon-fonts/icon-fonts.scss             | 3 +--
 packages/docs/components/Play.client.vue                    | 2 +-
 packages/docs/composables/code-sandbox/generators.ts        | 2 +-
 packages/docs/conventions.md                                | 2 +-
 .../installation/code/font-installation.html                | 2 +-
 .../installation/code/font-installation.scss                | 2 +-
 packages/docs/page-config/services/icons-config/index.ts    | 2 +-
 .../docs/page-config/ui-elements/icon/examples/Default.vue  | 2 +-
 packages/docs/page-config/ui-elements/icon/index.ts         | 2 +-
 packages/nuxt/src/composables/use-css.ts                    | 3 +--
 packages/nuxt/src/types.ts                                  | 4 ++--
 packages/sandbox/web-components/index.html                  | 6 +-----
 packages/ui/.storybook/assets/fonts.scss                    | 1 -
 packages/ui/.storybook/assets/icons/icons.scss              | 2 --
 packages/ui/src/components/va-icon/VaIcon.demo.vue          | 2 +-
 packages/ui/src/services/icon/presets/fonts.ts              | 4 ++--
 packages/vue-cli-plugin/generator/templates/vite/index.html | 2 +-
 .../generator/templates/vue-cli-webpack/public/index.html   | 2 +-
 18 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/packages/docs/assets/icon-fonts/icon-fonts.scss b/packages/docs/assets/icon-fonts/icon-fonts.scss
index a2c9804c46..1c8453a26e 100644
--- a/packages/docs/assets/icon-fonts/icon-fonts.scss
+++ b/packages/docs/assets/icon-fonts/icon-fonts.scss
@@ -4,5 +4,4 @@
 @import "ionicons/dist/scss/ionicons.scss";
 
 // Material Icons
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons+Outlined);
+@import url(https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined);
diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
index 7b36cb244f..1f7b74b574 100644
--- a/packages/docs/components/Play.client.vue
+++ b/packages/docs/components/Play.client.vue
@@ -86,7 +86,7 @@ const TAILWIND_CDN = '<script src="https://cdn.tailwindcss.com"><\/script>'
 const previewOptions = computed<ReplProps['previewOptions']>(() => ({
   headHTML: `
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
     <link rel="stylesheet" href="${window.location.origin + '/vuestic-out/style.css'}">
     <style>
       body {
diff --git a/packages/docs/composables/code-sandbox/generators.ts b/packages/docs/composables/code-sandbox/generators.ts
index 222fd8bc8e..492a7f17e9 100644
--- a/packages/docs/composables/code-sandbox/generators.ts
+++ b/packages/docs/composables/code-sandbox/generators.ts
@@ -9,7 +9,7 @@ export const getCodeSandboxHtml = ({ requireIcons = false }: CodeSandboxConfig):
       rel="stylesheet"
     >
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
       rel="stylesheet"
     >
     <link
diff --git a/packages/docs/conventions.md b/packages/docs/conventions.md
index e7d11696f0..2ab94fa032 100644
--- a/packages/docs/conventions.md
+++ b/packages/docs/conventions.md
@@ -49,7 +49,7 @@ In future we also plan to be :
 ### Fonts
 
 * General text: `https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700`
-* Icons: `https://fonts.googleapis.com/icon?family=Material+Icons`
+* Icons: `https://fonts.googleapis.com/icon?family=Material+Symobls+Outlined`
 
 ## Code style
 
diff --git a/packages/docs/page-config/getting-started/installation/code/font-installation.html b/packages/docs/page-config/getting-started/installation/code/font-installation.html
index d97b0adb42..6bcff9537e 100644
--- a/packages/docs/page-config/getting-started/installation/code/font-installation.html
+++ b/packages/docs/page-config/getting-started/installation/code/font-installation.html
@@ -3,6 +3,6 @@
   rel="stylesheet"
 />
 <link
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
   rel="stylesheet"
 />
diff --git a/packages/docs/page-config/getting-started/installation/code/font-installation.scss b/packages/docs/page-config/getting-started/installation/code/font-installation.scss
index c089eead15..610abd5a8f 100644
--- a/packages/docs/page-config/getting-started/installation/code/font-installation.scss
+++ b/packages/docs/page-config/getting-started/installation/code/font-installation.scss
@@ -1,2 +1,2 @@
 @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap");
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url("https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined");
diff --git a/packages/docs/page-config/services/icons-config/index.ts b/packages/docs/page-config/services/icons-config/index.ts
index 9471cc3209..e8cc3211d1 100644
--- a/packages/docs/page-config/services/icons-config/index.ts
+++ b/packages/docs/page-config/services/icons-config/index.ts
@@ -52,7 +52,7 @@ export default definePageConfig({
 
     block.headline("Interactive playground"),
     block.paragraph("Here you can see how your code will be transformed with different icon configs. You can change icon config params to see how it impact on final render. See our presets before play."),
-    block.alert("By default Vuestic require only Material Icons. Other icon libraries you need to setup yourself.", "info"),
+    block.alert("By default Vuestic require only Material Symbols Outlined. Other icon libraries you need to setup yourself.", "info"),
     block.component("playground"),
 
     // aliases
diff --git a/packages/docs/page-config/ui-elements/icon/examples/Default.vue b/packages/docs/page-config/ui-elements/icon/examples/Default.vue
index 0302802b31..90c964b4fd 100644
--- a/packages/docs/page-config/ui-elements/icon/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/icon/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <p>
     Material Design Icons<br>
-    <VaIcon class="material-icons">
+    <VaIcon class="material-symbols-outlined">
       book
     </VaIcon>
     <VaIcon name="book" />
diff --git a/packages/docs/page-config/ui-elements/icon/index.ts b/packages/docs/page-config/ui-elements/icon/index.ts
index 48eb661739..a29c0b5a51 100644
--- a/packages/docs/page-config/ui-elements/icon/index.ts
+++ b/packages/docs/page-config/ui-elements/icon/index.ts
@@ -31,7 +31,7 @@ export default definePageConfig({
         requireIcons: true,
       },
     }),
-    block.alert("Notice that Vuestic UI uses only Material Icons by default. You need to manually install additional libraries.", "warning"),
+    block.alert("Notice that Vuestic UI uses only Material Symbols Outlined by default. You need to manually install additional libraries.", "warning"),
     block.example("Color", {
       title: "Color",
       description: "Set different colors using the `color` prop. You can either use a theme string or the HEX color value."
diff --git a/packages/nuxt/src/composables/use-css.ts b/packages/nuxt/src/composables/use-css.ts
index a4012f2e1d..5abb3e2811 100644
--- a/packages/nuxt/src/composables/use-css.ts
+++ b/packages/nuxt/src/composables/use-css.ts
@@ -4,8 +4,7 @@ import type { VuesticOptions } from "../types";
 
 const VUESTIC_DEFAULT_FONTS = [
   { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap' },
-  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=swap' },
-  {rel: 'stylesheet', href: '(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined' }
+  { rel: 'stylesheet', href: '(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined' }
 ]
 
 const registerDefaultFonts = (nuxt: Nuxt) => {
diff --git a/packages/nuxt/src/types.ts b/packages/nuxt/src/types.ts
index a1c0e66fbb..24a8a8b8d3 100644
--- a/packages/nuxt/src/types.ts
+++ b/packages/nuxt/src/types.ts
@@ -25,7 +25,7 @@ export interface VuesticOptions {
    *
    * If `false` you will need to install fonts manually. If you're going to use different font, don't forget to change `--va-font-family` CSS variable.
    *
-   * @notice this option adds `Source Sans Pro` and `Material Icons` fonts.
+   * @notice this option adds `Source Sans Pro` and `Material Symbols Outlined` fonts.
    *
    * @default true
    *
@@ -36,7 +36,7 @@ export interface VuesticOptions {
 
   /**
    * Vuestic will automatically store its theme in cookies. If you want to change the key, you can do it here.
-   * 
+   *
    * @default 'vuestic-theme'
    */
   themeCookieKey: string
diff --git a/packages/sandbox/web-components/index.html b/packages/sandbox/web-components/index.html
index 3666accdb7..c7557dcb05 100644
--- a/packages/sandbox/web-components/index.html
+++ b/packages/sandbox/web-components/index.html
@@ -15,11 +15,7 @@
     />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
+      href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
     />
   </head>
   <body>
diff --git a/packages/ui/.storybook/assets/fonts.scss b/packages/ui/.storybook/assets/fonts.scss
index 1d0073bc5f..513adc182a 100644
--- a/packages/ui/.storybook/assets/fonts.scss
+++ b/packages/ui/.storybook/assets/fonts.scss
@@ -1,6 +1,5 @@
 // Fonts //
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);
 
 body {
diff --git a/packages/ui/.storybook/assets/icons/icons.scss b/packages/ui/.storybook/assets/icons/icons.scss
index e3b4ea2dae..9708749712 100644
--- a/packages/ui/.storybook/assets/icons/icons.scss
+++ b/packages/ui/.storybook/assets/icons/icons.scss
@@ -12,6 +12,4 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/regular.scss";
 
 // material icons
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons+Outlined);
 @import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);
diff --git a/packages/ui/src/components/va-icon/VaIcon.demo.vue b/packages/ui/src/components/va-icon/VaIcon.demo.vue
index e3273a82c9..9d4394c45c 100644
--- a/packages/ui/src/components/va-icon/VaIcon.demo.vue
+++ b/packages/ui/src/components/va-icon/VaIcon.demo.vue
@@ -1,7 +1,7 @@
 <template>
   <VbDemo>
     <VbCard title="MD">
-      <va-icon class="material-icons">home</va-icon>
+      <va-icon class="material-symbols-outlined">home</va-icon>
       <va-icon name="home" />
     </VbCard>
     <VbCard title="MSO">
diff --git a/packages/ui/src/services/icon/presets/fonts.ts b/packages/ui/src/services/icon/presets/fonts.ts
index ed086f8357..5625bdd363 100644
--- a/packages/ui/src/services/icon/presets/fonts.ts
+++ b/packages/ui/src/services/icon/presets/fonts.ts
@@ -3,13 +3,13 @@ import { IconConfig } from '../types'
 export const VuesticIconFonts: IconConfig = [
   {
     name: 'mi-{icon}',
-    class: 'material-icons',
+    class: 'material-symbols-outlined',
     resolve: ({ icon }) => ({ content: icon }),
   },
   // Fallback
   {
     name: '{icon}',
-    class: 'material-icons',
+    class: 'material-symbols-outlined',
     resolve: ({ icon }) => ({ content: icon }),
   },
 ]
diff --git a/packages/vue-cli-plugin/generator/templates/vite/index.html b/packages/vue-cli-plugin/generator/templates/vite/index.html
index 7f2e1d4ce1..396f3d56fc 100644
--- a/packages/vue-cli-plugin/generator/templates/vite/index.html
+++ b/packages/vue-cli-plugin/generator/templates/vite/index.html
@@ -4,4 +4,4 @@
 ---
 <head>
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet"> 
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
diff --git a/packages/vue-cli-plugin/generator/templates/vue-cli-webpack/public/index.html b/packages/vue-cli-plugin/generator/templates/vue-cli-webpack/public/index.html
index 560950fab3..07672637c5 100644
--- a/packages/vue-cli-plugin/generator/templates/vue-cli-webpack/public/index.html
+++ b/packages/vue-cli-plugin/generator/templates/vue-cli-webpack/public/index.html
@@ -4,4 +4,4 @@
 ---
 <head>
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet"> 
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">