fix(pwa): cache the hashed icon font so it renders offline on iOS #8138

In production the esbuild builder fingerprints the @font-face url() and
emits the Material Symbols woff2 to /media/<hash>.woff2, but ngsw-config
only precached the unhashed /assets/fonts copy that nothing loads. The
font the app actually requests was therefore never in the service worker
cache and failed to load offline, leaving icons as their ligature names
(wb_sunny, settings, ...). iOS Safari surfaces this first because, unlike
Chrome, it does not fall back to the HTTP disk cache offline.

- prefetch /media/material-symbols-outlined-*.woff2 (the URL @font-face
  actually requests)
- lazily cache the rest of /media (self-hosted Open Sans) so offline text
  also keeps its font
- font-display: block so the brief load window shows blank glyph space
  rather than the ligature names

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/**"]
       }
     },
     {

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');
 }