Skip to main content

IconPicker

The IconPicker component provides a searchable dropdown interface for selecting icons from an icon library.

Overview​

IconPicker provides a complete icon selection solution with:

  • Searchable icon library
  • Clear selection option
  • Configurable placement
  • Disabled and readonly states
  • Icon preview

Basic Usage​

{
  uuid: "my-icon-picker",
  name: "menu_icon",
  component_type: "icon-picker",
  input: {
    value: { type: "string", value: "home" },
    placeholder: { type: "string", value: "Select an icon" }
  },
  event: {
    onChange: `
      $selectedIcon = EventData.value;
    `
  }
}

Component Inputs​

PropertyTypeDefaultDescription
valuestring''Currently selected icon name
placeholderstring'Select icon'Placeholder text
sizestring'small'Size: 'small', 'medium', 'large'
placementstring'auto'Dropdown placement
triggerstring'manual'Trigger mode
disabledbooleanfalseDisable the picker
readonlybooleanfalseMake read-only
showSearchbooleantrueShow search input
showClearbooleantrueShow clear button
maxVisiblenumber500Maximum visible icons

Events​

onChange​

Triggered: When an icon is selected

EventData:

{
  value: string  // Selected icon name
  icon: object   // Icon details
}

onOpen / onClose​

Triggered: When picker opens/closes

onSearch​

Triggered: When searching icons

EventData:

{
  query: string  // Search query
}

onClear​

Triggered: When selection is cleared

Common Patterns​

{
  component_type: "icon-picker",
  input: {
    placeholder: { type: "string", value: "Select menu icon" }
  },
  inputHandlers: {
    value: `return $currentMenuItem?.icon || '';`
  },
  event: {
    onChange: `
      $currentMenuItem = {
        ...$currentMenuItem,
        icon: EventData.value
      };
    `
  }
}

See Also​