Icon Picker
A component to show a picker element to select icons.
Last updated
A component to show a picker element to select icons.
Last updated
The Icon Picker component allows users to select a specific icon from the Lightning Design System Library. It typically consists of a list of icons the user can browse through and select by clicking on the icon or using search or filter functionality to narrow the list of options. The selected icon is displayed within the interface or can represent specific data or functionality.
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.
You can customize the appearance of the icon menu by customizing the following attributes: Menu Label, Menu Icon Size, Menu Variant.
Under the Advanced Options section, specific icon categories can hide.
Interactions define what happens when users select an icon. A list of interactions is available here.
Here are the available Actions for the Icon Picker component:
On Change: The event fired when the icon changes
From the Styles panel, you can customize styling attributes for the Hero Banner:
Label: to customize the style of the label if a label text is present.
You can find the instructions for styling here.
accessKey
String
Specifies a shortcut key to activate or focus an element.
disabled
Boolean
If present, the input field is disabled and users cannot interact with it.
fieldLevelHelp
String
Help text detailing the purpose and function of the input.
hiddenCategories
String[]
The icon categories that will be hidden by default.
hideFooter
Boolean
If present, the dropdown footer is hidden.
hideInputText
Boolean
If present, the input text next to the icon button is hidden.
label
String
Text label for the input.
menuIconSize
String
The size of the icon.
Options include xx-small, x-small, small, medium, or large.
menuLabel
String
Optional text to be shown on the button.
menuVariant
String
The variant changes the look of the button.
Accepted variants include bare, container, border, border-filled, bare-inverse, and border-inverse.
This value defaults to border.
placeholder
String
Text that is displayed when the field is empty, to prompt the user for a valid entry.
readOnly
Boolean
If present, the input field is read-only and cannot be edited by users.
required
Boolean
If present, the input field must be filled out before the form is submitted.
value
String
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.
variant
String
The variant changes the appearance of an input field.
Accepted variants include standard, label-inline, label-hidden, and label-stacked.
This value defaults to standard, which displays the label above the field.
Use label-hidden to hide the label but make it available to assistive technology.
Use label-inline to horizontally align the label and input field. Use label-stacked to place the label above the input field.
change
The event fired when the icon changes.
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.
