BOBSvgIcon
Render SVGs from the bundled Material or UI icon sets (or any path/string). Inherits color and scales with size.
API reference ↗Basic usage
RAZOR
<BOBSvgIcon Icon="@BOBIconKeys.UI.Home" />Material Icons
Use BOBIconKeys.MaterialIconsOutlined, .MaterialIconsRound, .MaterialIconsSharp, or .MaterialIconsFilled.
RAZOR
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_favorite" />
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_star" />
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_settings" />
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_search" />
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_shopping_cart" />UI Icons
A curated set for UI chrome: BOBIconKeys.UI.*.
RAZOR
<BOBSvgIcon Icon="@BOBIconKeys.UI.Home" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Search" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Settings" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Notifications" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Email" />Sizes
RAZOR
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_star" Size="BOBSize.Small" />
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_star" Size="BOBSize.Medium" />
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsOutlined.i_star" Size="BOBSize.Large" />Colors
RAZOR
<BOBSvgIcon Icon="@BOBIconKeys.UI.Favorite" Color="@PaletteColor.Primary" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Favorite" Color="@PaletteColor.Secondary" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Favorite" Color="@PaletteColor.Error" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Favorite" Color="@PaletteColor.Success" />
<BOBSvgIcon Icon="@BOBIconKeys.UI.Favorite" Color="@PaletteColor.Warning" />Clickable
RAZOR
<BOBSvgIcon Icon="@BOBIconKeys.MaterialIconsSharp.i_thumb_up"
Color="@PaletteColor.Primary"
Size="BOBSize.Large"
OnClick="@(() => _clickCount++)" />
<span>Clicked @_clickCount times</span>Properties
6 rows.
| Property | Type | Default | Description |
|---|---|---|---|
Icon | IconKey | | Closed-catalog icon key (obtain from ). |
Title | string? | | Tooltip text displayed on hover. |
Size | BOBSize | BOBSize.Medium | Visual size of the component. |
Color | string? | | Text or foreground color. Accepts any valid CSS color value. |
ViewBox | string | "0 0 24 24" | ViewBox. |
OnClick | EventCallback<MouseEventArgs> | | Raised when the component is clicked. |