Icon Picker

The Icon Picker component allows users to select an icon from a predefined list.

Overview

The Icon Picker provides a user-friendly interface for selecting icons. Instead of typing in an icon name (like utility:add), users can visually browse and choose from a categorized list. The component then stores the selected icon name as its value, which you can use in other components (like a Button's iconName property) or Formulas.

---

Configuring the Icon Picker

Select the Icon Picker component on the canvas to access its properties in the Properties Panel.

Basic Properties

These properties control the fundamental data and labeling of the Icon Picker.

• API Name: (Text) A unique identifier for this component instance (e.g., StatusIconPicker).

• Label: (Text) The text label displayed above or next to the Icon Picker input field. Example: "Select an Icon:", "Choose Status Icon:".

• Value: (Text - Crucially Important) This property holds the name of the currently selected icon (e.g., utility:add, standard:account).

  • Data Binding: You should bind this property to a Text Variable resource. This variable will store the selected icon name. You can then use this variable to set the Icon Name property of other components (like Buttons, Metrics, etc.).

• Field Level Help: (Text, Optional) Help text displayed next to the label.

• Placeholder: (Text) Placeholder text displayed in the Icon Picker's input field before the user makes a selection. Example: "Search for an icon..."

Appearance Properties

These properties control the visual presentation of the Icon Picker itself (not the icons within it).

• Variant: (Text - Select from options) Controls the visual style and positioning of the label:

  • standard: Label above the input field.

  • label-inline: Label to the left of the input field.

  • label-stacked: Label above the input field (may have different styling than standard).

  • label-hidden: Hide the label.

• Menu Label: (Text) Customize the label of the menu displayed.

• Menu Icon Size: (Text - Select from options) Controls the size of the icons within the dropdown menu: x-small, small, medium, large, x-large.

• Menu Variant: (Text - Select from options) Control the visual style of the menu.

Behavior Properties

These properties control how the user interacts with the Icon Picker.

• Hide Footer: (Boolean - Checkbox) If enabled, hides the "Cancel" and "Done" buttons in the dropdown menu. If hidden, selection happens immediately when an icon is clicked.

• Hide Input Text: (Boolean - Checkbox) If enabled, the text input field (where the user can type to search) is hidden. The Icon Picker will appear as a button that opens the icon selection menu. Use this if you want to force users to browse rather than search.

• Disabled: (Boolean - Checkbox) Completely disables the Icon Picker.

• Read Only: (Boolean - Checkbox) Allows the user to see the selected icon, but not change it.

• Required: (Boolean - Checkbox) Makes icon selection mandatory.

• Visible: (Boolean) Controls whether the Icon Picker component is visible on the page.

Filtering Options (Advanced)

• Hidden Categories: (Text - Comma Separated) Hide specific categories

---

Example: Dynamically Setting a Header's Icon

This example shows how to use an Icon Picker to let the user dynamically change the icon displayed on an Avonni Header component.

1. Add the Icon picker component

   1. API Name: MyIconPicker

   2. Label: "Select Button Icon:"

   3. Value: Bind this to {!selectedIcon}.

2. Add the Header component

   1. Map the Icon name value to the value coming from the Icon Picker element > value.

Final Result

Data Binding process

---

Important Considerations

• Data Binding: The Value property is key. Bind it to a Variable to store the selected icon name.

• Icon Libraries: Be aware of which icon libraries are available (SLDS, Avonni custom icons). The Icon Picker will only show icons included with the Avonni package.

• Accessibility: Provide a descriptive Label and consider using Field Level Help to guide users.

• Dynamic Updates: Use the Value property with Formulas and other interactions to create dynamic behavior based on the selected icon.

The Icon Picker is a user-friendly way to choose icons. The component supports SLDS icons.