From 86357f705a3d3214036599cea36069782983695d Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Mon, 8 Jun 2026 16:05:17 +0200
Subject: [PATCH] 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                    | 4 ++--
 src/styles/font/material-icons.scss | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

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