IconPicker

A dropdown-style picker that shows a configurable grid of Font Awesome icons. Selecting an icon updates the trigger label and a hidden form input for submission. Default: no icon selected (shows placeholder).

Basic

A picker with a predefined icon list and no initial selection.

Choose an icon:

No icon selected.

echo $m->iconPicker('iconpicker-basic')
    ->name('icon_basic')
    ->icons([
        ['value' => 'fa-comments', 'text' => 'Comments'],
        ['value' => 'fa-star',     'text' => 'Featured'],
        // ...
    ])
    ->placeholder('Select an icon…');

document.getElementById('iconpicker-basic').addEventListener('m:iconpicker:change', function(e) {
    console.log(e.detail.value, e.detail.label);
});

// Or via the JS API:
var picker = m.iconPicker('iconpicker-basic');
picker.getValue(); // → 'fa-comments' (or '' if none selected)

Pre-selected Value

Pass a value() to pre-select an icon on render.

Topic icon:

echo $m->iconPicker('iconpicker-presel')
    ->name('icon_presel')
    ->icons($icons)
    ->value('fa-star')         // pre-select "Featured"
    ->placeholder('Select an icon…');

Disabled

The picker can be disabled to prevent interaction.

Icon (disabled):

echo $m->iconPicker('iconpicker-disabled')
    ->name('icon_disabled')
    ->icons($icons)
    ->value('fa-lock')
    ->disabled();

JS API — setValue

Use the JS API to set or get the selected icon programmatically.

Controlled picker:

No icon selected.

var picker = m.iconPicker('iconpicker-api');

document.getElementById('apiSetBtn').addEventListener('click', function() {
    picker.setValue('fa-bug');
});

document.getElementById('apiClearBtn').addEventListener('click', function() {
    picker.setValue('');
});

document.getElementById('iconpicker-api').addEventListener('m:iconpicker:change', function(e) {
    document.getElementById('iconpicker-api-output').textContent =
        'Selected: ' + e.detail.value + ' (' + e.detail.label + ')';
});

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->iconPicker($id)`	`IconPicker`	Create an IconPicker instance.
`->icons(array $icons)`	`self`	Set the icon list. Each entry: `['value' => 'fa-star', 'text' => 'Label']`.
`->value(?string $value)`	`self`	Pre-select an icon by its FA class (e.g. `'fa-star'`). Default: `null` (none selected).
`->name(string $name)`	`self`	Form field name for the hidden input.
`->placeholder(string $p)`	`self`	Label shown when no icon is selected. Default: `'Select an icon…'`.
`->disabled(bool $d)`	`self`	Disable the picker. Default: `false`.

JS JS Methods

Method / Property	Parameters	Description
`m.iconPicker(id)`	`object\|null`	Get the initialized IconPicker instance for the given element ID.
`picker.getValue()`	`string`	Return the currently selected icon value (FA class), or `''` if none.
`picker.setValue(value)`	`void`	Programmatically select an icon by its FA class. Pass `''` to clear.
`picker.open()`	`void`	Open the icon grid panel.
`picker.close()`	`void`	Close the icon grid panel.

EVENT Events

Event Name	Detail	Description
`m:iconpicker:change`	`{ id, value, label }`	Fired on the container element when the selected icon changes.