/* ===================================================================== MATERIAL SYMBOLS — Self-hosted, iOS-safe icon font layer Loads from the same origin so iPhone 15 Safari / Chrome cannot be blocked by third-party content blockers or fail on gstatic timeouts. ===================================================================== */ /* Regular (outlined) icon font — static WOFF2, weight 400, default FILL 0 */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/materialsymbolsoutlined-400.woff2') format('woff2'); } /* Filled variant — used automatically for icons that request FILL=1 */ @font-face { font-family: 'Material Symbols Fill'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/materialsymbolsoutlined-fill.woff2') format('woff2'); } /* Base icon class — strong, explicit, iOS-safe */ .material-symbols-outlined, .material-symbols { font-family: 'Material Symbols Outlined' !important; font-weight: normal !important; font-style: normal !important; font-size: inherit; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important; display: inline-block !important; white-space: nowrap !important; word-wrap: normal; direction: ltr; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-feature-settings: "liga" !important; -webkit-font-feature-settings: "liga" !important; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24 !important; font-optical-sizing: auto !important; vertical-align: middle; speak: never; -webkit-text-stroke: 0; /* Fade in once the font is confirmed loaded (see ms-loaded helper) */ opacity: 1; transition: opacity 0.15s ease; } /* Prevent the icon ligature name from flashing while the font loads. The .ms-loading class is added by a tiny inline script in . */ .ms-loading .material-symbols-outlined, .ms-loading .material-symbols { opacity: 0 !important; visibility: hidden !important; } .ms-loaded .material-symbols-outlined, .ms-loaded .material-symbols { opacity: 1 !important; visibility: visible !important; } /* Filled icons: switch to the filled font family. Static WOFF2 files do not expose the FILL axis, so we serve a dedicated filled font file and select it here. */ .material-symbols-outlined[data-weight="fill"], .material-symbols-outlined[data-weight="Fill"], .material-symbols-outlined[data-fill="1"], .material-symbols-outlined[style*="'FILL' 1"], .material-symbols-outlined[style*='"FILL" 1'], .material-symbols-outlined[style*="'FILL'1"], .material-symbols-outlined[style*='"FILL"1'] { font-family: 'Material Symbols Fill' !important; }