chore: self hosted font & icon assets

package.json

@@ -11,6 +11,12 @@
         "lint:fix": "prettier --write ."
     },
     "devDependencies": {
+        "@fontsource/material-icons": "^5.0.18",
+        "@fontsource/material-icons-outlined": "^5.0.12",
+        "@fontsource/material-icons-round": "^5.0.12",
+        "@fontsource/material-icons-sharp": "^5.0.12",
+        "@fontsource/material-icons-two-tone": "^5.0.12",
+        "@fontsource/roboto": "^5.0.13",
         "@shufo/prettier-plugin-blade": "^1.14.1",
         "material-components-web": "^14.0.0",
         "prettier": "^3.3.2",

src/Helper.php

@@ -40,6 +40,8 @@ public static function generateAssetResponse(string $fileName, string $extName)
             ['Content-Type' => match ($extName) {
                 'css' => 'text/css',
                 'js' => 'application/javascript',
+                'woff2' => 'font/woff2',
+                'woff' => 'font/woff',
                 default => 'text/plain',
             }]
         );

src/assets/src/main.scss

@@ -1,3 +1,5 @@
+@use 'systems/fonts.scss';
+
 // base style
 @use 'material-components-web';
 

src/assets/src/systems/fonts.scss

@@ -0,0 +1,65 @@
+@use '@fontsource/roboto/300.css' as roboto300;
+@use '@fontsource/roboto/400.css' as roboto400;
+@use '@fontsource/roboto/500.css' as roboto500;
+
+@use '@fontsource/material-icons';
+@use '@fontsource/material-icons-outlined';
+@use '@fontsource/material-icons-two-tone';
+@use '@fontsource/material-icons-round';
+@use '@fontsource/material-icons-sharp';
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px; /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+}
+
+/* Rules for sizing the icon. */
+.material-icons.md-18 {
+    font-size: 18px;
+}
+.material-icons.md-24 {
+    font-size: 24px;
+}
+.material-icons.md-36 {
+    font-size: 36px;
+}
+.material-icons.md-48 {
+    font-size: 48px;
+}
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark {
+    color: rgba(0, 0, 0, 0.54);
+}
+.material-icons.md-dark.md-inactive {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light {
+    color: rgba(255, 255, 255, 1);
+}
+.material-icons.md-light.md-inactive {
+    color: rgba(255, 255, 255, 0.3);
+}

src/views/components/_assets.blade.php

@@ -1,11 +1,8 @@
-<link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
->
 <link
     rel="stylesheet"
     href="{{ route('material-blade.assets', ['main', 'css']) }}"
 >
+
 <script
     type="module"
     src="{{ route('material-blade.assets', ['main', 'js']) }}"

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 
 export default defineConfig({
+    base: '/assets/material-blade/',
     build: {
         rollupOptions: {
             input: {