ProductUI Icon - PrimerBlazor

Basic Icons

<PrimerIcon Icon="IconName.Star16" />
<PrimerIcon Icon="IconName.Bell16" />
<PrimerIcon Icon="IconName.Heart16" />
<PrimerIcon Icon="IconName.Alert16" />

Sizes

<PrimerIcon Icon="IconName.Star16" Size="IconSize.Small" />
<PrimerIcon Icon="IconName.Star16" Size="IconSize.Medium" />
<PrimerIcon Icon="IconName.Star16" Size="IconSize.Large" />
<PrimerIcon Icon="IconName.Star16" Size="IconSize.ExtraLarge" />

Colors

<PrimerIcon Icon="IconName.Star16" Color="IconColor.Success" />
<PrimerIcon Icon="IconName.Star16" Color="IconColor.Danger" />
<PrimerIcon Icon="IconName.Star16" Color="IconColor.Attention" />
<PrimerIcon Icon="IconName.Star16" Color="IconColor.Muted" />

Icon Options

Available options for PrimerIcon component

Name	Description	Default Value	CSS Class
Icon	The icon to display	Alert16	octicon
Size	Icon size	Medium	icon-sm / md / lg / xl
Color	Foreground color	null	color-fg-{color}
TooltipDirection	Tooltip direction	Bottom	tooltip-{direction}
AriaLabelName	ARIA label for accessibility	-	-
OnClick	Click event handler	-	-