Material Symbols Picker

Zero-dependency icon picker. Fetches ~2 600 icons from the Google Fonts API with full-text tag search and category filtering. Outline / Rounded / Sharp variants, selective font loading, Fill toggle, Light & Dark themes. No flash on load.

Auto theme · all variants

— no icon selected —

Dark theme · Rounded only — no variant pills

— —

Light theme · Outlined & Sharp only

— no icon selected —

Auto theme · Sharp only — no variant pills

— —

Form integration — live button preview

Button

Usage

<!-- 1. Include the script -->
<script src="material-symbols-picker.js"></script>

// 2a. Auto-init
MaterialSymbolsPicker.init('[data-icon-picker]');

// 2b. Manual
const picker = new MaterialSymbolsPicker(inputEl, {
  variant:    'rounded',              // active style: 'outlined' | 'rounded' | 'sharp'
  variants:   ['outlined', 'rounded'], // which styles to offer (omit = all three)
  fill:       0,                     // 0 | 1
  theme:      'auto',                // 'light' | 'dark' | 'auto'
  fetchIcons: true,                 // fetch from Google Fonts API (default true)
  onChange:   (name) => console.log(name),

  // i18n — override any string
  strings: {
    placeholder:      'Choisir une icône…',
    searchPlaceholder:'Rechercher…',
    clear:            'Effacer',
    noResults:        'Aucun résultat',
    allCategories:    'Toutes les catégories',
  },
});

// Public methods
picker.getValue();        // → 'home'
picker.setValue('star');  // set programmatically
picker.setTheme('dark'); // 'light' | 'dark' | 'auto'
picker.destroy();         // tear down