Icon

The Icon component displays a Lightning Design System (SLDS) icon within your Avonni Dynamic Components, with configurable size, variant styling, tooltip title, and accessibility text. It supports standard SLDS icons and may include custom icons provided by Avonni.

Overview

The Icon component is a simple visual element. It's used to:

• Represent actions or states visually.
• Provide visual cues for navigation.
• Add visual interest.
• Improve accessibility (with proper alternative text).

Icons enhance the visual appeal and usability of your components.

Example 1: Static Account Icon

• Icon Name: standard:account
• Icon Size: medium
• Title: Account Icon

This displays the standard Salesforce Account icon.

Example 2: Dynamic Icon (Formula)

• Icon Name: myStatusIcon (This is a Formula resource)
• Icon Size: small
• Variant: inverse
• Title: Opportunity Status

The myStatusIcon Formula resource might contain:

IF(OpportunityStageName = 'Closed Won', 'utility:check', IF(OpportunityStageName = 'Closed Lost', 'utility:close', 'utility:help' ) )

This changes the icon based on an Opportunity's StageName.

Configuration

To configure the Icon, select it on the canvas. The Edit Icon panel opens on the right with the Properties, Interactions, and Style tabs. The section below mirrors the Properties tab.

Properties

Icon Name

The Lightning Design System name of the icon. Use:

• SLDS Icons: Format category:name (e.g., standard:account, utility:add). Find available icons in the Salesforce Lightning Design System documentation.
• Avonni Custom Icons: See Avonni documentation for names.
• Dynamic Value: You can use a Variable, Constant, or Formula to change the icon based on data.

Icon Size

The size of the icon. Valid values include xx-small, x-small, small, medium, and large. Defaults to medium.

Variant

The variant changes the appearance of the icon (its color). Available values are inverse, success, warning, and error. Variants apply to utility icons.

Title

Title of the icon, displayed as a tooltip when hovering over the icon (in most browsers).

Alternative Text

Alternative text for the icon, used by screen readers. Describe the icon's purpose, not just its appearance. Example: "Create New Account," not "Plus Sign."

Important Considerations

• Accessibility: ALWAYS provide a meaningful Alternative Text.
• SLDS Compliance: Using SLDS icons ensures visual consistency.
• Dynamic Icons: Use Variables/Formulas to change icons based on data.
• Icon Availability: Check the documentation for valid icon names.

Set Component Visibility

All components support conditional visibility — see Component Visibility.