An icon picker is a text field that holds a Material Symbols name. A panel opens on top of it with instant search over all icons, Recent and Popular.
How to add the icon picker to a field. The file is components/icon-picker/icon-picker.js.
One script tag. Style the input with eco-input: inside an Input field the picker anchors on the .input-wrap, so the panel covers the whole field. Never copy the picker into a page.
| Step | What to do |
|---|---|
| 1. Link | <script src="/components/icon-picker/icon-picker.js"></script> (from docs pages: ../../components/icon-picker/icon-picker.js) and /components/css/input.css. |
| 2. Markup | An Input field with data-icon-picker on the input. |
| 3. Font | The page needs the Material Symbols Outlined font (already in both templates). |
| 4. React | Listen for the input event to re-render a preview or save the value. |
| 5. Server | Run the server from the repo root (npx serve .) for the root-absolute script path. |
| Name | Use |
|---|---|
data-icon-picker | On the text input that holds the name. The script attaches to every such input on load. |
input event | Fired on the input when an icon is picked. The value is the Material Symbols name. |
localStorage["eco-icon-recent"] | The last 8 picks, shared by all pages. |
components/icon-picker/icon-picker.js instead; every page gets it.icon-picker-data.js next to the script, 0.5 s after load. Never add that file by hand..ip-wrap and makes it 100% wide.The picker has no CSS file: its styles are injected by the script, with tokens only. The script is shared by every page. Link it, never copy it.