Icon

The Icon component allows you to display icons within your Avonni Dynamic Components. It supports standard Salesforce Lightning Design System (SLDS) icons and may include custom icons provided by Avonni. Icons enhance the visual appeal and usability of your components.

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

---

Properties

The Icon component has these properties in the Properties Panel:

• API Name: A unique identifier for the component.

• Icon Name: (Text) The 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.

• Icon Size: (Text) The icon's size. Options usually include:

  • x-small

  • small

  • medium

  • large

  • x-large

• Variant: (Text) The icon's style (color). Only works with utility icons. Options often include:

  • base

  • error

  • warning

  • success

  • inverse

• Title: (Text) Alternative text for the icon. Essential for accessibility! This text is:

  • Used by screen readers.

  • Displayed as a tooltip on hover (in most browsers). Describe the icon's purpose, not just its appearance. Example: "Create New Account," not "Plus Sign."

• Visible: (Boolean) Controls visibility, supports dynamic show and hide.

---

Examples

Example 1: Static Account Icon

• Icon Name: standard:account

• Icon Size: medium

• Variant: base

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

---

Important Considerations

• Accessibility: ALWAYS provide a meaningful Title.

• 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