MudBlazor.FontIcons.MaterialSymbols

Material Symbols for MudBlazor

MudBlazor.FontIcons.MaterialSymbols puts Google's Material Symbols in your MudBlazor app: 3,800+ icons in Outlined, Rounded, and Sharp styles, each a strongly typed C# constant with IntelliSense, served by self-hosted fonts.

Install

dotnet add package MudBlazor.FontIcons.MaterialSymbols

Requires MudBlazor 7.0.0+ and .NET 8, 9, or 10.

Add the stylesheet

Add this next to your MudBlazor stylesheet (in App.razor, wwwroot/index.html, or your host page):

<link href="_content/MudBlazor.FontIcons.MaterialSymbols/css/font.min.css" rel="stylesheet" />

The fonts ship in the package and are served by your app. No CDN, no internet required at runtime.

Use an icon

Pass a constant to MudIcon, or to any MudBlazor component with an icon parameter:

<MudIcon Icon="@MudBlazor.FontIcons.MaterialSymbols.Outlined.Database" />

<MudIconButton Icon="@MudBlazor.FontIcons.MaterialSymbols.Rounded.Settings" />

<MudButton StartIcon="@MudBlazor.FontIcons.MaterialSymbols.Sharp.Download">Download</MudButton>

Browse Google Fonts to find an icon, then PascalCase its name: rocket_launch becomes Outlined.RocketLaunch. Names starting with a digit get an underscore: 10k becomes Outlined._10K.

Available styles

Shorten names with an alias

The full namespace is a mouthful. Alias it in _Imports.razor:

@using MaterialSymbols = MudBlazor.FontIcons.MaterialSymbols

<MudIcon Icon="@MaterialSymbols.Outlined.Database" />

Note: A Razor compiler limitation means aliases only work from _Imports.razor, not from individual .razor pages.

Optional: preload fonts

Fonts download when the first icon appears, so icons can briefly flash as text. To avoid that, preload the styles you use, before the stylesheet link:

<link rel="preload"
      href="_content/MudBlazor.FontIcons.MaterialSymbols/font/MaterialSymbolsOutlined.woff2"
      as="font"
      type="font/woff2"
      crossorigin>
<link href="_content/MudBlazor.FontIcons.MaterialSymbols/css/font.min.css" rel="stylesheet" />

The other styles follow the same pattern: MaterialSymbolsRounded.woff2 and MaterialSymbolsSharp.woff2. Preload only what you use; each preload is a download on every page load.

Optional: Google Fonts CDN

Prefer Google's CDN? Swap the package stylesheet for:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />

The C# constants work the same either way.

Troubleshooting

Icons render as text, like "database". The stylesheet isn't loading. Check the <link> tag and watch the browser's network tab for a 404 on font.min.css.

An alias won't compile. It has to live in _Imports.razor. See the note above.

An icon from Google Fonts is missing. Google adds symbols faster than releases ship. Open an issue to request a refresh.

Related links

• MudBlazor.Icons repository: source, issues, contributing
• MudBlazor.FontIcons.MaterialIcons: companion pack for classic Material Icons, with Filled and Two-Tone styles
• MudBlazor documentation
• Browse Material Symbols on Google Fonts