Components

Icon

SVG icons that inherit colour and size from their surroundings. No icon font, no package to install.

The built-in set

VetoIcons is a class of string constants, each one the inner markup of a 24x24 SVG. Only the icons you actually reference end up in your app.

Menu

Close

Home

Search

Settings

User

Bell

Sun

Moon

Monitor

Check

Plus

Minus

Edit

Trash

Copy

Info

Warning

Error

Success

Document

Folder

Grid

Sidebar

Terminal

Palette

DragHandle

ExternalLink

ChevronUp

ChevronDown

ChevronLeft

ChevronRight

razor

<VetoIcon Icon="@VetoIcons.Search" />

Sizes and colour

Icons draw with currentColor, so they take the colour of whatever they sit in. Size Inherit makes an icon scale with the text beside it.

Inherits its size

razor

<VetoIcon Icon="@VetoIcons.Bell" Size="VetoIconSize.Small" />
<VetoIcon Icon="@VetoIcons.Bell" Size="VetoIconSize.ExtraLarge" />

<!-- Inherit scales with the surrounding text -->
<span>Read more <VetoIcon Icon="@VetoIcons.ChevronRight" Size="VetoIconSize.Inherit" /></span>

Decorative by default

An icon beside a label says nothing new, so it is hidden from screen readers. Give it a Title only when the icon is the only thing carrying the meaning - it then becomes an image with an accessible name.

razor

<!-- Decorative: hidden from screen readers -->
<VetoIcon Icon="@VetoIcons.Info" />

<!-- Meaningful: announced as "Delete" -->
<VetoIcon Icon="@VetoIcons.Trash" Title="Delete" />

Rotation and spin

Rotation reuses one chevron for all four directions. Spin is for loading states, and stops under prefers-reduced-motion.

razor

<VetoIcon Icon="@VetoIcons.ChevronDown" Rotation="180" />
<VetoIcon Icon="@VetoIcons.Settings" Spin="true" />

Colour, weight and mirroring

Icons take the text colour around them. Color picks a theme colour instead. StrokeWidth matches the weight of nearby text, and Flip mirrors an icon so one drawing serves as its own reflection.

razor

<VetoIcon Icon="@VetoIcons.Success" Color="VetoColor.Success" />
<VetoIcon Icon="@VetoIcons.Bell" StrokeWidth="1.5" />
<VetoIcon Icon="@VetoIcons.ExternalLink" Flip="VetoIconFlip.Horizontal" />

Your own icons

Icon takes any SVG markup, so you are never limited to the built-in set. Draw with currentColor and it behaves like the rest.

razor

<VetoIcon Icon="@MyIcon" Size="VetoIconSize.ExtraLarge" />

@code {
    private const string MyIcon =
        "<path d=\"M12 3 4 21h16Z\" /><path d=\"M12 10v5\" />";
}

Parameters

Parameter	Type	Default	Description
`Icon`	`string?`	`null`	The icon's SVG inner markup, normally a VetoIcons constant.
`Size`	`VetoIconSize`	`Medium`	Small, Medium, Large, ExtraLarge, or Inherit to follow the font size.
`Title`	`string?`	`null`	Accessible name. Supplying one makes the icon role="img"; leaving it null keeps it decorative.
`Rotation`	`int`	`0`	Rotation in degrees.
`Spin`	`bool`	`false`	Spins continuously. Ignored under prefers-reduced-motion.
`StrokeWidth`	`double`	`2`	Stroke weight, for matching surrounding text.
`Color`	`VetoColor?`	`null`	A theme colour. Null inherits the surrounding text colour.
`Flip`	`VetoIconFlip`	`None`	None, Horizontal, Vertical or Both.
`ViewBox`	`string`	`"0 0 24 24"`	Only needs changing for icons not drawn on a 24x24 grid.