Material Design Icon Picker in Vanilla JavaScript

Material Symbols Picker is a JavaScript icon picker that lets you search, preview, and select Material Design icons.

It works with the current Material Symbols set from Google Fonts and supports outlined, rounded, and sharp styles, category filtering, live search, and variable font settings such as fill, weight, grade, and optical size.

Features:

• Fetches the latest Google Fonts icon manifest at runtime.
• Supports outlined, rounded, and sharp icon style variants.
• Searches icons by name and by descriptive tag terms.
• Filters icons by category through a dropdown selector.
• Variable font axis controls for fill, weight, grade, and optical size.
• Built-in light and dark themes, plus an auto mode that tracks the operating system preference.
• Renders large icon grids through virtual scrolling.
• Falls back to a curated set of common icons when the remote metadata fetch is unavailable.

How to use it:

1. Download and load the Material Symbols Picker in the document. The library writes its own styles to the document head on first initialization.

<!-- From Local -->
<script src="/path/to/material-symbols-picker.js"></script>

<!-- Or from a CDN -->
<script src="https://cdn.jsdelivr.net/gh/Axsag/material-icons-picker@latest/material-symbols-picker.js"></script>

2. Auto-init the Material Symbols Picker with the data-icon-picker attribute:

<!-- The input stores the selected icon name -->
<input type="text" data-icon-picker value="settings" />

<script>
  // Find every matching input and attach a picker instance
  MaterialSymbolsPicker.init('[data-icon-picker]');
</script>

3. Use manual setup when you need callbacks, theme control, or custom icon data. All configuration options:

• variant (string): The Material Symbols style applied in both the grid and the trigger button. Accepts 'outlined', 'rounded', or 'sharp'. Default: 'outlined'.
• fill (number): The fill axis value for the variable font. Set to 0 for stroke icons or 1 for solid icons. Default: 0.
• weight (number): The font weight axis value. Accepts integers from 100 through 700. Default: 400.
• grade (number): The grade axis for fine-tuning stroke thickness. Accepts -25, 0, or 200. Default: 0.
• size (number): The icon size in pixels as displayed in the trigger button preview. Default: 24.
• theme (string): The color mode for the picker UI. Accepts 'light', 'dark', or 'auto'. Default: 'auto'.
• fetchIcons (boolean): Fetches the full icon metadata from Google Fonts when true. Set to false to use the built-in fallback icon list. Default: true.
• icons (array): A custom array of icon name strings. When present, the library uses this list directly and skips the remote fetch entirely. Default: null.
• onChange (function): A callback that receives the selected icon name as a string each time the user makes a selection. Default: null.
• strings (object): A partial strings object for overriding default UI labels. Default: {}.

<input type="text" id="featureIcon" value="dashboard" />

// Grab the native input
const input = document.getElementById('featureIcon');

// Create one picker with custom options
const picker = new MaterialSymbolsPicker(input, {
  variant: 'rounded', // outlined | rounded | sharp
  fill: 1,      // 0 = line style, 1 = filled style
  weight: 500,    // 100 through 700
  grade: 0,       // -25 | 0 | 200
  size: 24,       // trigger preview size in px
  theme: 'auto',    // light | dark | auto
  fetchIcons: true,   // load the full metadata list
  onChange: (iconName) => {
    // React to icon changes in your UI
    console.log('Current icon:', iconName);
  },
  strings: {
    placeholder: 'Pick an icon',
    searchLabel: 'Find an icon',
    searchPlaceholder: 'Type a name or keyword',
    clear: 'Reset',
    noResults: 'No matching icons',
    allCategories: 'Every category',
    loading: 'Loading icon list...',
    toggleDark: 'Use dark mode',
    toggleLight: 'Use light mode'
  }
});

4. Reflect the selected icon in another element:

<label>
  Action icon
  <input type="text" id="actionIcon" value="bolt" />
</label>
<button type="button" id="previewButton">
  <span id="previewGlyph" class="material-symbols-outlined">bolt</span>
  Save
</button>

const iconInput = document.getElementById('actionIcon');
const previewGlyph = document.getElementById('previewGlyph');

// Create the picker
new MaterialSymbolsPicker(iconInput, {
  variant: 'outlined',
  onChange: (iconName) => {
    // Keep the external preview in sync
    previewGlyph.textContent = iconName || 'bolt';
  }
});

// Watch native input changes too
iconInput.addEventListener('change', () => {
  previewGlyph.textContent = iconInput.value || 'bolt';
});

5. Use a custom icon list for a limited picker:

<input type="text" id="statusIcon" value="check_circle" />

const approvedIcons = [
  'check_circle',
  'warning',
  'info',
  'error',
  'schedule',
  'notifications'
];

// Skip remote metadata and use a fixed list
new MaterialSymbolsPicker(document.getElementById('statusIcon'), {
  fetchIcons: false,
  icons: approvedIcons,
  theme: 'light'
});

6. API methods.

// Returns the currently selected icon name as a string.
// Returns an empty string when no icon is selected.
const currentIcon = picker.getValue();
console.log('Current value:', currentIcon); // e.g., "calendar_today"

// Sets the selected icon programmatically by name.
// The trigger button and the underlying input both update immediately.
picker.setValue('account_circle');

// Switches the picker's color theme at runtime.
// Pass 'light', 'dark', or 'auto' to restore OS-following behavior.
picker.setTheme('light');

// Tears down the picker and restores the original input element in place.
// Call this before removing the picker's parent node from the DOM.
picker.destroy();

FAQs:

Q: Does the picker work if the Google Fonts fetch fails?
A: Yes. The picker catches the fetch error and loads a built-in fallback list of common icons.

Q: How do I retrieve the selected icon name for use in a form submission?
A: Read the value from the original input element. The picker keeps the input’s value property in sync with the selection.

Q: The picker panel appears behind other elements on the page. How do I fix this?
A: The panel renders at z-index: 99999. A parent element with a CSS transform, filter, or will-change property creates a new stacking context that clips the panel. Remove those properties from the picker’s ancestor elements, or move the picker’s markup outside the affected container.

The post Material Design Icon Picker in Vanilla JavaScript appeared first on CSS Script.