Icon Picker

Examples

Basic Icon Picker

A basic icon picker with a label. Click the trigger to open the selection dialog.

<zn-icon-picker name="basic" label="Choose an Icon"></zn-icon-picker>

With a Pre-selected Icon

Set the icon and library attributes to pre-populate the picker.

<zn-icon-picker name="preset" label="Page Icon" icon="home" library="material"></zn-icon-picker>

With Colour

Set the color attribute to apply a colour to the icon.

<zn-icon-picker name="colored" label="Coloured Icon" icon="star" library="material" color="#e91e63"></zn-icon-picker>

Without Colour Option

Use the no-color attribute to hide the colour picker from the selection dialog.

<zn-icon-picker name="no-color" label="Icon Only" icon="settings" no-color></zn-icon-picker>

Without Library Option

Use the no-library attribute to hide the library selector, locking it to the default library.

<zn-icon-picker name="no-lib" label="Default Library Only" icon="check_circle" no-library></zn-icon-picker>

Without Colour or Library

Both options can be removed together for a minimal icon-only picker.

<zn-icon-picker name="minimal" label="Minimal Picker" icon="edit" no-color no-library></zn-icon-picker>

Brand Icons

Pre-select the brands library to show Kubex brand icons.

<zn-icon-picker name="brand" label="Brand Icon" icon="chargehive" library="brands"></zn-icon-picker>

Line Icons

Use the line library for Lineicons.

<zn-icon-picker name="line" label="Line Icon" icon="heart" library="line"></zn-icon-picker>

Gravatar

Use the gravatar library to display a Gravatar from an email address.

<zn-icon-picker name="grav" label="Gravatar" icon="user@example.com" library="gravatar" no-color></zn-icon-picker>

Avatar

Use the avatar library to generate initials from a name.

<zn-icon-picker name="av" label="Avatar" icon="John Smith" library="avatar" no-color></zn-icon-picker>

Upload Image

By default the picker only offers library icons. Add the allow-upload attribute to enable a secondary “Upload Image” mode in the dialog, letting users upload an image file instead of picking an icon. Use the accept attribute to restrict the accepted file types (defaults to image/*).

An uploaded file replaces the icon value: on submit, the file is sent under name in place of the icon string — the two are mutually exclusive. The chosen file is also available via the element’s file property.

<zn-icon-picker name="logo" label="Logo" allow-upload></zn-icon-picker>

Help Text

Add descriptive text below the picker with the help-text attribute.

<zn-icon-picker name="help" label="Navigation Icon" help-text="This icon will be displayed in the sidebar menu"></zn-icon-picker>

Disabled

Use the disabled attribute to prevent interaction.

<zn-icon-picker name="disabled" label="Disabled Picker" icon="lock" disabled></zn-icon-picker>

In a Form

The icon picker integrates with forms using hidden inputs. The field names follow the pattern {name}[icon], {name}[library], and {name}[color].

<form id="icon-form" onsubmit="return false;">
  <zn-icon-picker name="menu-icon" label="Menu Icon" icon="dashboard" library="material" color="#1976d2"></zn-icon-picker>
  <br>
  <zn-button type="submit" onclick="
    const form = document.getElementById('icon-form');
    const data = new FormData(form);
    const entries = [...data.entries()].map(([k,v]) => k + ': ' + v).join('\n');
    alert(entries);
  ">Show Form Data</zn-button>
</form>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.95/dist/components/icon-picker/icon-picker.js"></script>

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.95/dist/components/icon-picker/icon-picker.js';

import '@kubex/zinc/dist/components/icon-picker/icon-picker.js';

Properties

Learn more about attributes and properties.