From d8b6ae3688192f3e2a2b816f903c8a3af918d89c Mon Sep 17 00:00:00 2001
From: Diego Rodrigues de Sa e Souza
 <8016841+diegosouzapw@users.noreply.github.com>
Date: Sat, 13 Jun 2026 08:25:57 -0300
Subject: [PATCH] fix(dashboard): self-host Material Symbols icon font (#3695)
 (#3764)

The dashboard loaded the Material Symbols icon font only from the Google
Fonts CDN (fonts.googleapis.com). On networks where that CDN is blocked
(e.g. mainland China) the ligature font never loaded, so every icon
rendered as its literal text name and the layout broke. Bundle the font
locally via the material-symbols package so icons render without a
runtime CDN dependency.

Closes #3695
---
 CHANGELOG.md                                  |  2 +
 package-lock.json                             |  9 ++-
 package.json                                  |  1 +
 src/app/globals.css                           |  7 +++
 src/app/layout.tsx                            | 10 +---
 .../material-icons-self-hosted.test.ts        | 58 +++++++++++++++++++
 6 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 tests/unit/dashboard/material-icons-self-hosted.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 09349db1c9..60e0d1826b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### 🐛 Fixed
 
+- fix(dashboard): self-host the Material Symbols icon font instead of loading it from the Google Fonts CDN. On networks where `fonts.googleapis.com` is unreachable (e.g. mainland China), the icon ligature font never loaded, so every icon rendered as its literal text name (`smart_toy`, `visibility`, …) and the layout broke — especially after importing many models. The font is now bundled locally via the `material-symbols` package (`@import "material-symbols/outlined.css"` in `globals.css`), removing the runtime CDN dependency. ([#3695](https://github.com/diegosouzapw/OmniRoute/issues/3695) — thanks @lqyiwwx)
+
 - fix(antigravity): skip Google One AI credits retry on `full_quota_exhausted` verdict — antigravity executor now calls `decide429()` before attempting the credits retry so that a quota-exhausted account (24h cooldown) bypasses the extra upstream HTTP call instead of hanging for up to ~41s. Also persists the cooldown in the DB via `setConnectionRateLimitUntil` so post-restart routing skips exhausted connections without re-learning the hard way. Bonus: `antigravity429Engine` now recognises the real Antigravity "Individual quota reached. Contact your administrator to enable overages." error message as `quota_exhausted`. ([#3707](https://github.com/diegosouzapw/OmniRoute/issues/3707) — thanks @andrea-kingautomation)
 
 - fix(cli): `ServerSupervisor.handleExit` now coerces the exit code to a number before calling `process.exit()` — Node.js v24 throws `TypeError [ERR_INVALID_ARG_TYPE]` when `process.exit()` receives a string (e.g. `'ENOENT'` from a spawn `error` event's `err.code`). The `error` callback also now passes `-1` instead of the raw `err.code`, which is an OS error string rather than a meaningful exit code. ([#3748](https://github.com/diegosouzapw/OmniRoute/issues/3748))
diff --git a/package-lock.json b/package-lock.json
index 057d2a036f..bd60689b4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
         "lucide-react": "^1.16.0",
         "marked": "^18.0.4",
         "marked-terminal": "^7.3.0",
+        "material-symbols": "^0.45.1",
         "mermaid": "^11.15.0",
         "monaco-editor": "^0.55.1",
         "next": "^16.2.6",
@@ -93,7 +94,7 @@
         "@testing-library/react": "^16.3.2",
         "@types/bcryptjs": "^3.0.0",
         "@types/better-sqlite3": "^7.6.13",
-        "@types/bun": "*",
+        "@types/bun": "latest",
         "@types/keytar": "^4.4.2",
         "@types/node": "^25.9.1",
         "@types/react": "^19.2.15",
@@ -14876,6 +14877,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/material-symbols": {
+      "version": "0.45.1",
+      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.45.1.tgz",
+      "integrity": "sha512-iQibeoKymxHthNqTjYg/jCN2pRySFQ+DAD0sYK9FS7rUpf38i1qR3N4I1jfi/bLS5qdEKvkkJAvf2mE89amSZw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index 470f74c0c7..604d44958b 100644
--- a/package.json
+++ b/package.json
@@ -201,6 +201,7 @@
     "lucide-react": "^1.16.0",
     "marked": "^18.0.4",
     "marked-terminal": "^7.3.0",
+    "material-symbols": "^0.45.1",
     "mermaid": "^11.15.0",
     "monaco-editor": "^0.55.1",
     "next": "^16.2.6",
diff --git a/src/app/globals.css b/src/app/globals.css
index b95cb1a1f9..a7701be7e0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,13 @@
 @import "tailwindcss";
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
+/* Self-hosted Material Symbols icon font (#3695): the Google Fonts CDN
+   (fonts.googleapis.com) is blocked in some networks (e.g. mainland China),
+   which made every icon ligature fall back to its literal text name and broke
+   the layout. Bundling the font locally removes that runtime CDN dependency.
+   The bundled @font-face uses family "Material Symbols Outlined", matching the
+   .material-symbols-outlined rule defined later in this file. */
+@import "material-symbols/outlined.css";
 @source "../../node_modules/fumadocs-ui/css/generated/*.css";
 
 /* Tailwind v4 auto-detection cannot scan directories with parentheses
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2d4d23e3b5..f88989df76 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -59,13 +59,9 @@ export default async function RootLayout({ children }) {
   return (
     <html lang={locale} dir={isRtl ? "rtl" : "ltr"} suppressHydrationWarning>
       <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
-        <link
-          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
-          rel="stylesheet"
-        />
+        {/* Material Symbols icon font is self-hosted via globals.css
+            (@import "material-symbols/outlined.css") so icons render even when
+            the Google Fonts CDN is unreachable (#3695). */}
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/tests/unit/dashboard/material-icons-self-hosted.test.ts b/tests/unit/dashboard/material-icons-self-hosted.test.ts
new file mode 100644
index 0000000000..e2b61b5453
--- /dev/null
+++ b/tests/unit/dashboard/material-icons-self-hosted.test.ts
@@ -0,0 +1,58 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve, join } from "node:path";
+
+// Regression guard for #3695: the dashboard icons turned into their literal
+// text names ("smart_toy", "visibility", ...) and the layout broke for users
+// on networks where the Google Fonts CDN (fonts.googleapis.com / fonts.gstatic.com)
+// is unreachable — e.g. mainland China. Root cause: the Material Symbols icon
+// font (the sole source of the .material-symbols-outlined @font-face) was loaded
+// only from that CDN in src/app/layout.tsx. The fix self-hosts the font via the
+// `material-symbols` npm package imported in globals.css. These assertions fail
+// on the pre-fix tree and stay green afterwards, preventing re-introduction of a
+// runtime CDN dependency for icons.
+
+const cwd = process.cwd();
+const layoutPath = resolve(join(cwd, "src/app/layout.tsx"));
+const globalsPath = resolve(join(cwd, "src/app/globals.css"));
+
+test("layout.tsx does not load the Material Symbols icon font from the Google Fonts CDN", () => {
+  const layout = readFileSync(layoutPath, "utf8");
+  assert.ok(
+    !/fonts\.googleapis\.com[^"'\s]*Material\+Symbols/i.test(layout),
+    "layout.tsx must not load Material Symbols from fonts.googleapis.com (blocked in some regions)"
+  );
+  assert.ok(
+    !/fonts\.gstatic\.com/.test(layout),
+    "layout.tsx must not preconnect to the Google Fonts CDN for the icon font"
+  );
+});
+
+test("globals.css imports the self-hosted Material Symbols font", () => {
+  const globals = readFileSync(globalsPath, "utf8");
+  assert.match(
+    globals,
+    /@import\s+["']material-symbols\/outlined\.css["']/,
+    "globals.css must @import the self-hosted material-symbols/outlined.css"
+  );
+});
+
+test("the self-hosted material-symbols package is declared and resolvable", () => {
+  const pkg = JSON.parse(readFileSync(resolve(join(cwd, "package.json")), "utf8")) as {
+    dependencies?: Record<string, string>;
+  };
+  assert.ok(
+    pkg.dependencies?.["material-symbols"],
+    "package.json must declare the material-symbols dependency"
+  );
+  // The bundled CSS that supplies the @font-face + woff2 must exist on disk so the
+  // build can inline it (only enforced when node_modules is installed).
+  const cssPath = resolve(join(cwd, "node_modules/material-symbols/outlined.css"));
+  if (existsSync(resolve(join(cwd, "node_modules/material-symbols")))) {
+    assert.ok(
+      existsSync(cssPath),
+      "material-symbols/outlined.css must exist in the installed package"
+    );
+  }
+});