Icon Selector Dialog

A searchable icon selector dialog component for React with Material-UI and Iconify integration. Uses Dutch interface by default.

Features

• 🔍 Search across multiple icon sets
• 📂 Category-based browsing
• ⌨️ Keyboard shortcuts for quick search
• 🔄 Debounced search with async processing
• 🎨 Material-UI theming support
• 📱 Responsive design
• 💪 TypeScript support

Supported Icon Sets

This component includes the following icon sets out of the box:

• Material Design Icons
• Font Awesome
• Line Awesome
• Heroicons
• Feather Icons
• Phosphor Icons
• Carbon Icons

Installation

npm install @applaudem/icon-selector-dialog

Dependencies

This component requires the following peer dependencies:

• React (^17.0.0 || ^18.0.0)
• Material-UI (@mui/material ^6.1.3)
• React DOM (^17.0.0 || ^18.0.0)
• @emotion/react (^11.0.0)
• @emotion/styled (^11.0.0)

The following dependency will be installed automatically:

• @iconify/react (^5.0.0)

Usage

import IconSelector from '@applaudem/icon-selector-dialog';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedIcon, setSelectedIcon] = useState('');

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Select Icon
      </button>

      <IconSelector
        open={isOpen}
        onClose={() => setIsOpen(false)}
        onSelect={(iconName) => {
          setSelectedIcon(iconName);
          setIsOpen(false);
        }}
        currentIcon={selectedIcon}
      />
    </>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | open | boolean | Yes | Controls the visibility of the dialog | | onClose | () => void | Yes | Callback function when the dialog is closed | | onSelect | (iconName: string) => void | Yes | Callback function when an icon is selected | | currentIcon | string | No | Currently selected icon name (for highlighting) |

Features in Detail

Search Functionality

• Real-time search across all icon sets
• Debounced search to prevent UI blocking
• Shows icon set information in search results
• Clear search button

Keyboard Support

• Auto-focus search input when dialog opens
• Keyboard navigation support
• Escape key to close dialog

Category Management

• Icons organized by categories
• "Other" category automatically placed at the bottom
• Disabled category selection during search

UI/UX Features

• Loading states with progress indicators
• Responsive grid layout
• Icon preview with names
• Hover and selection states
• Clear visual hierarchy
• Dutch interface

License

MIT © Applaudem