Reduce first-load icon flicker with font-display: block and preload guidance (#23)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: danielchalmers <7112040+danielchalmers@users.noreply.github.com>
Co-authored-by: ScarletKuro <19953225+ScarletKuro@users.noreply.github.com>

Author: 3 people

documentation/material_icons_usage.md

@@ -15,6 +15,37 @@ To use the icons in your MudBlazor project, you can add the following CSS link t
 <link href="_content/MudBlazor.FontIcons.MaterialIcons/css/font.min.css" rel="stylesheet" />
 ```
 
+To reduce first-load flicker, preload the Material Symbols font files before loading the stylesheet:
+
+```html
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialIcons/font/MaterialIcons.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialIcons/font/MaterialIconsOutlined.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialIcons/font/MaterialIconsRound.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialIcons/font/MaterialIconsSharp.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialIcons/font/MaterialIconsTwoTone.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link href="_content/MudBlazor.FontIcons.MaterialIcons/css/font.min.css" rel="stylesheet" />
+```
+
 Alternatively, you can use the following CDN links:
 
 ```html

documentation/material_symbols_usage.md

@@ -15,6 +15,27 @@ To use the icons in your MudBlazor project, you can add the following CSS link t
 <link href="_content/MudBlazor.FontIcons.MaterialSymbols/css/font.min.css" rel="stylesheet" />
 ```
 
+To reduce first-load flicker, preload the Material Symbols font files before loading the stylesheet:
+
+```html
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialSymbols/font/MaterialSymbolsRounded.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialSymbols/font/MaterialSymbolsOutlined.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="_content/MudBlazor.FontIcons.MaterialSymbols/font/MaterialSymbolsSharp.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link href="_content/MudBlazor.FontIcons.MaterialSymbols/css/font.min.css" rel="stylesheet" />
+```
+
 Alternatively, you can use the following CDN links:
 
 ```html

src/MudBlazor.FontIcons.MaterialIcons/wwwroot/css/font.css

@@ -3,34 +3,39 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialIcons.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Material Icons Outlined';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialIconsOutlined.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Material Icons Round';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialIconsRound.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Material Icons Sharp';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialIconsSharp.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Material Icons Two Tone';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialIconsTwoTone.woff2) format('woff2');
 }
 body {
@@ -115,4 +120,4 @@ body {
   direction: ltr;
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
-}
+}

src/MudBlazor.FontIcons.MaterialIcons/wwwroot/css/font.min.css

@@ -3,20 +3,23 @@
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialSymbolsOutlined.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialSymbolsRounded.woff2) format('woff2');
 }
 
 @font-face {
   font-family: 'Material Symbols Sharp';
   font-style: normal;
   font-weight: 400;
+  font-display: block;
   src: url(../font/MaterialSymbolsSharp.woff2) format('woff2');
 }
 
@@ -66,4 +69,4 @@
   direction: ltr;
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
-}
+}