Skip to content

material_symbols_usage.md

Latest commit

 

History

History
71 lines (52 loc) · 2.76 KB

material_symbols_usage.md

File metadata and controls

71 lines (52 loc) · 2.76 KB

MudBlazor Material Symbols

NuGet version NuGet downloads

Supported MudBlazor Versions

MudBlazor.FontIcons.MaterialSymbols MudBlazor .NET
1.0.0 => 7.0.0-preview.4 => .NET 7 & NET 8

To use the icons in your MudBlazor project, you can add the following CSS link to your HTML or Razor layout:

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

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

<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" />

Example Usage

To use an icon in your MudBlazor component, you can use the <MudIcon> component and specify the icon using the Icon parameter. For example:

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

This will render an icon representing a database, using the Material Symbols Outlined style.

Using Aliases

If you prefer not to use the full qualifier every time, you can create an alias in _Imports.razor by adding the following line:

@using MaterialSymbols = MudBlazor.FontIcons.MaterialSymbols

This allows you to access the icons like this:

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

NB! Please note that aliases do not work in normal Razor pages (dotnet/razor#7670)!