LgIcon

LgIcon displays an icon from the application's icon library (SVG generated at compile time). Icon names are exposed through the generated IconNames.All.* constants. The icon can display a tooltip and respond to clicks.

<LgIcon IconName="@IconNames.All.Check" />

• Namespace : Lagoon.UI.Components
• Inherits from : LgAriaComponentBase → LgComponentBase
• NuGet package : Lagoon.UI

Icon gallery

Each Lagoon application exposes the built-in page LgPageIcons on the route lg/icon-library: it lists all available icons with their IconNames.All.* names.

Usage

Simple icon

IconName is used with the generated IconNames.All.* constants (icons from the module and referenced Lagoon modules are merged at compile time).

StatusPage.razor

<LgIcon IconName="@IconNames.All.CheckCircleFill" CssClass="text-success" />
<LgIcon IconName="@IconNames.All.ExclamationTriangleFill" CssClass="text-warning" />

Tooltip

HelpPage.razor

<LgIcon IconName="@IconNames.All.InfoCircle"
        Tooltip="#FieldHelpText" />

Clickable icon

OnClick makes the icon interactive. Remember AriaLabel: the icon alone has no accessible label.

FilterPage.razor

<LgIcon IconName="@IconNames.All.XCircle"
        AriaLabel="#ClearFilters"
        Tooltip="#ClearFilters"
        OnClick="ClearFiltersAsync" />

FilterPage.razor.cs

public partial class FilterPage : LgPage
{
    // Resets the screen filters: light action, an icon is enough.
    private Task ClearFiltersAsync(ActionEventArgs args)
    {
        ShowInformation("#FiltersCleared");
        return Task.CompletedTask;
    }
}

Icon or button?

For an important action or one subject to permissions, prefer LgButton with IconName: it provides disabled state, policies, confirmation, and double-click prevention.

Static rendering

The static method GetMarkupContent(iconName, cssClass) returns the icon's SVG as a string, useful for composing HTML manually (for example in a cell template).

Properties

All component [Parameter] properties, including inherited ones.

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgIcon	Additional HTML attributes applied to the rendered SVG element.
CssClass	string	null	LgIcon	Additional CSS classes.
IconName	string	null	LgIcon	Icon name (IconNames.All.*).
OnClick	EventCallback<ActionEventArgs>	—	LgIcon	Callback triggered on icon click.
Tooltip	string	null	LgIcon	Tooltip.
TooltipIsHtml	bool	false	LgIcon	Indicates whether the Tooltip content is HTML format (otherwise plain text).
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Methods & events

Member	Signature	Description
OnClick	EventCallback<ActionEventArgs>	On icon click.
GetMarkupContent	static string GetMarkupContent(string iconName, string cssClass = null)	Returns the icon's SVG as an HTML string.

Best practices / Accessibility

• Set AriaLabel (or associate visible text) whenever the icon carries information or an action; a decorative icon can remain unlabeled.
• Always use the IconNames.All.* constants rather than hard-coded names: the name is verified at compile time.

Complete reference

All parameters: API reference — LgIcon.

Related components

• LgButton — button with icon, preferred for actions.
• LgLabel — label that can accompany an icon.