Icon Input Showcase
Example
Icon Picker
Color
Lightness
-
Chroma
-
Hue
-
Dark Theme Invert
Icon
Icon is_icon_only
Icon Picker
Icon
Component Documentation
Component Name
IconInput
Builder Function Name
create_icon_input_manager
Description
lets users pick an icon (and optionally its color), displaying a searchable list of available icons
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | any | if is_icon_only is true, val is simply the icon key (string). otherwise val is an object { icon, color } | |
| is_icon_only | boolean | false | if true, the value is just a string representing the icon key; color is ignored |
| icon_options | array | a built-in list of sample icons if not provided | array of { key, name } objects describing available icons |
| on_finish | function | callback triggered on 'finish'; receives the final val | |
| is_button_compressed | boolean | true | makes the toggle button narrower if true |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | initializes state, managers for color input, searching, popover toggles, etc. | config: object | void |
| set_icon | updates the chosen icon in val | input: string (the icon key) | void |
| set_is_icon_only | toggles between is_icon_only: modifies val accordingly (string vs. { icon, color }) | input: boolean | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | any | the current selection. if is_icon_only is true, it's a string; otherwise an object { icon, color } |
| is_icon_only | boolean | if true, val is just a string for the icon key |
| popover_manager | object | popover manager controlling the icon picker popover |
| popover_toggle_button_manager | object | button manager that opens/closes the icon picker popover |
| finish_button_manager | object | button manager that finalizes and closes the picker, calling on_finish |
| icon_options_filtered | array | the subset of icon options matching any search text |
| search_icons_text_input_manager | object | manages the text input used to filter the icon list |
| color_input_manager | object | manages color selection if is_icon_only is false |
| clear_button_manager | object | button manager to reset val to null |
| icon_options | array | the full array of possible icons |
| selected_icon_manager | object | an icon manager instance for showing the currently selected icon |
