Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsData display

Icons

MudIcon draws an SVG icon from the bundled Material sets or from your own path data. Use it beside text to aid scanning; an icon that stands alone needs an accessible name.

Five Material styles

Every Material icon ships in Filled, Outlined, Rounded, Sharp and TwoTone. Pick one style for the whole product; mixing them looks accidental.

Icons.Material: style → icon ↓
Icon ↓ · Style →FilledOutlinedRoundedSharpTwoTone
Bookmark
LocalShipping
Notifications
Settings
ShoppingBasket

Every size and color

Size × Color, rendered from the enums. Disabled drops the Color, so the icon inherits the text color. For any other size, set font-size: the SVG scales with it.

MudIcon: Size × Color
Size ↓ · Color →DefaultPrimarySecondaryTertiaryInfoSuccessWarningErrorDarkTransparentInheritSurface
Small
Medium
Large
Primary, but Disabled
font-size: 3.5rem
font-size: 5rem

Decorative and meaningful icons

An icon next to a label is decoration and stays hidden from screen readers. An icon that carries meaning on its own gets a Title, which becomes the SVG's accessible name.

Decorative: the text already says it

Departs 18:42

Platform 4, Central Station

Step-free access

Meaningful: the icon is the only signal

Harbour line

Good service

Riverside line

Minor delays

Airport line

Suspended
Hover an icon to see its title; screen readers announce it.

Custom SVG icons

Icon accepts SVG markup, so your own glyphs behave like Material ones: they take Color and Size. ViewBox matches the coordinate system you drew in.

Observatory ViewBox 0 0 32 32
Observatory Size.Medium, Secondary
Observatory Size.Small, inherited color
Bread Default 24 × 24 grid
GitHub Icons.Custom.Brands

Searchable icon picker

The icon constants are found by reflection, filtered as you type and capped at 200 results so the grid stays fast. Searching a style by reflection keeps its whole icon set in the WebAssembly download, so the picker offers Outlined and Filled. Pick an icon to get its constant.

Search icons
Style
Showing the first 200 of 2122 icons. Type to narrow the list.

Train

Icons.Material.Outlined.Train

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

Café
Icon
Size
Color
Title (accessible name)
<MudIcon
    Icon="@Icons.Material.Outlined.LocalCafe"
    Size="Size.Large"
    Color="Color.Primary"
    Title="Café" />

Starting .NET in your browser…