diff --git a/ngsw-config.json b/ngsw-config.json
index 60ee244c93..9853d12854 100644
--- a/ngsw-config.json
+++ b/ngsw-config.json
@@ -19,7 +19,7 @@
           "/assets/icons/icon-*.png",
           "/assets/icons/favicon-*.png",
           "/assets/i18n/en.json",
-          "/assets/fonts/material-symbols-outlined.woff2",
+          "/media/material-symbols-outlined-*.woff2",
           "/*.(otf|ttf|woff|woff2)"
         ]
       }
@@ -29,7 +29,7 @@
       "installMode": "lazy",
       "updateMode": "prefetch",
       "resources": {
-        "files": ["/assets/**"]
+        "files": ["/assets/**", "/media/**"]
       }
     },
     {
diff --git a/src/styles/font/material-icons.scss b/src/styles/font/material-icons.scss
index 639d2644e0..0cc2c79706 100644
--- a/src/styles/font/material-icons.scss
+++ b/src/styles/font/material-icons.scss
@@ -8,7 +8,9 @@
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
-  font-display: swap; // Prevent render blocking, show text immediately
+  // `block` (not `swap`) so the brief load window renders blank glyph space instead
+  // of the ligature names (e.g. "settings", "wb_sunny") as fallback-font text (#8138).
+  font-display: block;
   src: url('../../assets/fonts/material-symbols-outlined.woff2') format('woff2');
 }