Icon Picker Examples

Basic Icon Picker

A simple icon picker with all default options. Click the input to open the icon selection dialog.

Select an Icon:

Select an icon to see it here

<input type="text"
       data-rsl-icon-picker
       placeholder="Click to select an icon...">

Source Filtering

Limit icons to a specific source or show all sources with a default filter.

Font Awesome Only:

RSL Icons Only:

All Sources, Default to Font Awesome:

<!-- Font Awesome icons only -->
<input type="text" data-rsl-icon-picker data-sources="fontawesome">

<!-- RSL icons only -->
<input type="text" data-rsl-icon-picker data-sources="rsl">

<!-- All sources, but default filter to Font Awesome -->
<input type="text" data-rsl-icon-picker data-default-source="fontawesome">

Category Presets

Pre-filter to specific icon categories for focused selection.

Navigation Icons:

Media Icons:

Communication Icons:

Status Icons:

<!-- Pre-filter to navigation icons -->
<input type="text" data-rsl-icon-picker data-default-category="navigation">

<!-- Pre-filter to communication icons -->
<input type="text" data-rsl-icon-picker data-default-category="communication">

<!-- Available categories: all, navigation, actions, communication,
     media, data, user, interface, status, objects, symbols -->

Programmatic Control

Use the JavaScript API to control the icon picker programmatically.

Controlled Picker:

const picker = document.querySelector('#my-picker');

// Open the picker dialog
RSL.IconPicker.open(picker);

// Close the dialog
RSL.IconPicker.close(picker);

// Set an icon by ID
RSL.IconPicker.setValue(picker, 'fa-home');

// Get the current value
const value = RSL.IconPicker.getValue(picker);
console.log(value); // {source, id, name, class, html}

// Clear the selection
RSL.IconPicker.clear(picker);

Event Handling

Listen for icon selection events to update your UI in real-time.

Select an Icon:

Select an icon to see event data

document.querySelector('#my-picker').addEventListener('rsl-icon-change', function(e) {
    const icon = e.detail;

    console.log('Source:', icon.source);
    console.log('ID:', icon.id);
    console.log('Name:', icon.name);
    console.log('HTML:', icon.html);

    // Update your UI
    document.querySelector('.icon-preview').innerHTML = icon.html;
});

// Listen for clear events
picker.addEventListener('rsl-icon-clear', function() {
    console.log('Icon selection cleared');
});

Form Integration

Use the icon picker within forms with required validation.

<form>
    <label>Menu Item Icon:</label>
    <input type="text"
           data-rsl-icon-picker
           data-required="true"
           name="icon">
    <button type="submit">Save</button>
</form>

<script>
form.addEventListener('submit', function(e) {
    const picker = document.querySelector('[data-rsl-icon-picker]');
    const value = RSL.IconPicker.getValue(picker);

    if (!value) {
        e.preventDefault();
        alert('Please select an icon');
        return;
    }

    // Submit with icon data
    formData.append('icon', JSON.stringify(value));
});
</script>

Compact Mode

Hide optional features for a more streamlined experience.

Without Preview Panel:

Without Recent Icons:

Minimal (No Preview, No Recent):

<!-- Without preview panel -->
<input type="text" data-rsl-icon-picker data-show-preview="false">

<!-- Without recent icons -->
<input type="text" data-rsl-icon-picker data-show-recent="false">

<!-- Minimal mode -->
<input type="text" data-rsl-icon-picker
       data-show-preview="false"
       data-show-recent="false">