Icons & Avatars

Visual elements that provide context, improve navigation, and represent users within the interface.

Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.

Icons

MgIcon

Supports Bootstrap Icons by default. Icons can be easily customized with Tailwind classes for size, color, and hover effects.

EmojiIcon

Modern emoji-based icons with built-in hover effects, tooltips, size variants, and semantic color variants.

MgAvatar

Used to represent users or entities. Supports images and labels in different positions.

Property	Type	Default	Description
IconName	string	""	Bootstrap icon class (e.g., "bi bi-heart").
TipText	string	null	Optional tooltip text.

Property	Type	Default	Description
Icon	string	Document	Emoji glyph to display; use a value from EmojiIconGlyph or a custom emoji.
TipText	string	""	Text shown in the tooltip.
TooltipClasses	string	bg-blue-200 text-black	Tailwind classes applied to the tooltip.
IconClicked	EventCallback<MouseEventArgs>	not set	Callback invoked when the visible icon is clicked.
Visible	bool	true	Controls whether the icon is rendered and can be clicked.
Size	string	md	Icon size: sm, md, lg, or xl.
Color	string	default	Semantic color variant: default, success, danger, warning, or info.

Property	Type	Default	Description
DisplayText	string	""	Name displayed next to the avatar.
ImagePath	string	null	URL for the avatar image.
NamePosition	MgPosition	Bottom	Position of the name relative to image.