# Icon Picker

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

<figure><img src="/files/fSh6Qnn4WTPoyVfdcz23" alt=""><figcaption><p>Final Result</p></figcaption></figure>

<figure><img src="/files/jfnIf0nbS9CssveTE0mm" alt=""><figcaption><p>Data Binding process</p></figcaption></figure>

***

## 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](/dynamic-components/component-builder/resources/formula.md) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/icon-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.