add material icons preload guidance and font-display block

Agent-Logs-Url: https://github.com/MudBlazor/MudBlazor.Icons/sessions/9eec0945-aad2-4b3c-95af-58949556483e

Co-authored-by: ScarletKuro <19953225+ScarletKuro@users.noreply.github.com>

Author: Copilot

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 Icons 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

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;
-}
+}