# Icon Picker

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FYirG2GF3TWVp7XXQm9K6%2FIcon%20Picker.png?alt=media&#x26;token=b7f3b09f-73fc-4558-b253-1fb26b91114b" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

### Adding a label

The Label field lets you add contextual text for the Icon Picker component. The Label text will be displayed according to the `Variant` attribute. Styling hooks can be applied to the Label text from the [Style panel](https://docs.avonnicomponents.com/flow/component-builder/style-panel).

### Customizing the icon menu

You can customize the appearance of the icon menu by customizing the following attributes: `Menu Label`, `Menu Icon Size`, `Menu Variant`.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FoH5FyQWwJ6gP3h865ODA%2F2022-11-07_15-11-25.png?alt=media&#x26;token=4d92bb0f-3f6e-4273-9d85-d372a46d3ed5" alt=""><figcaption></figcaption></figure>

### Hide icons categories

Under the `Advanced Options` section, specific icon categories can hide.&#x20;

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FiiqzR1WpxljuFp5QKweT%2F2022-11-07_15-04-19.png?alt=media&#x26;token=bd2af490-319b-489e-a625-68b7ac95dd54" alt=""><figcaption><p>How to hide specific icon categories</p></figcaption></figure>

***

## Adding Interactions

Interactions define what happens when users select an icon. A list of interactions is available [here](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel).

Here are the available Actions for the Icon Picker component:

* On `Change`: The event fired when the icon changes

***

## Styling the Icon Picker

From the Styles panel, you can customize styling attributes for the Hero Banner:&#x20;

* `Label`: to customize the style of the label if a label text is present.

You can find the instructions for styling [here](https://docs.avonnicomponents.com/flow/component-builder/style-panel).

***

## Examples

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FD1myNNH0GxGPQ4wObpbe%2F2022-10-31_16-28-39.png?alt=media&#x26;token=8c66b00b-c6bc-4c44-859d-9858c8015f10" alt=""><figcaption></figcaption></figure>

***

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>accessKey</td><td>String</td><td>Specifies a shortcut key to activate or focus an element.</td></tr><tr><td>disabled</td><td>Boolean</td><td>If present, the input field is disabled and users cannot interact with it.</td></tr><tr><td>fieldLevelHelp</td><td>String</td><td>Help text detailing the purpose and function of the input.</td></tr><tr><td>hiddenCategories</td><td>String[]</td><td>The icon categories that will be hidden by default.</td></tr><tr><td>hideFooter</td><td>Boolean</td><td>If present, the dropdown footer is hidden.</td></tr><tr><td>hideInputText</td><td>Boolean</td><td>If present, the input text next to the icon button is hidden.</td></tr><tr><td>label</td><td>String</td><td>Text label for the input.</td></tr><tr><td>menuIconSize</td><td>String</td><td><p>The size of the icon.</p><p>Options include <code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, or <code>large</code>.</p></td></tr><tr><td>menuLabel</td><td>String</td><td>Optional text to be shown on the button.</td></tr><tr><td>menuVariant</td><td>String</td><td><p>The variant changes the look of the button.</p><p>Accepted variants include <code>bare</code>, <code>container</code>, <code>border</code>, <code>border-filled</code>, <code>bare-inverse</code>, and <code>border-inverse</code>.</p><p>This value defaults to border.</p></td></tr><tr><td>placeholder</td><td>String</td><td>Text that is displayed when the field is empty, to prompt the user for a valid entry.</td></tr><tr><td>readOnly</td><td>Boolean</td><td>If present, the input field is read-only and cannot be edited by users.</td></tr><tr><td>required</td><td>Boolean</td><td>If present, the input field must be filled out before the form is submitted.</td></tr><tr><td>value</td><td>String</td><td>The Lightning Design System name of the selected icon. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed.</td></tr><tr><td>variant</td><td>String</td><td><p>The variant changes the appearance of an input field.</p><p>Accepted variants include <code>standard</code>, <code>label-inline</code>, <code>label-hidden</code>, and <code>label-stacked</code>.</p><p>This value defaults to standard, which displays the label above the field.</p><p>Use label-hidden to hide the label but make it available to assistive technology.</p><p>Use label-inline to horizontally align the label and input field. Use <code>label-stacked</code> to place the label above the input field.</p></td></tr></tbody></table>

### Events

| Name   | Description                            |
| ------ | -------------------------------------- |
| change | The event fired when the icon changes. |

### Styling Hooks

| Name        | Description                         |
| ----------- | ----------------------------------- |
| Text Color  | Define a text color for the label.  |
| Font Size   | Define a font size for the label.   |
| Font Style  | Define a font style for the label.  |
| Font Weight | Define a font weight for the label. |