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.

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
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.