@zunicornshift/mui-iconify-picker

180,000+ icons in one icon picker by the support of Iconify.

This React component is allowing users to search Iconify icons and select. And this component is using Material UI components internally.

Installation

The react, react-dom and @mui/material are peer dependencies of this package. It means you have to install them all in your project before installing this module.

"@mui/material": ">=5.0.0 <8.0.0",
"react": ">=17.0.0 <20.0.0",
"react-dom": ">=17.0.0 <20.0.0"

Then run the below commands based on your package manager.

npm install --save @zunicornshift/mui-iconify-picker #NPM
yarn add @zunicornshift/mui-iconify-picker           #Yarn

Usage

import IconifyPicker from "@zunicornshift/mui-iconify-picker";


<IconifyPicker />

All the props are optional, you can install it and use it without any customizations.

Customizations

| Prop Name | Type | Description | | ----------------- | ----------------------------------------------------- | -------------------------------- | | value | string \| null | The name of the selected icon. Icon names must be in "mdi:airplane" format. | | onChange | (value: string, e: MouseEvent<HTMLElement>) => void | A callback function that receiving value as the first parameter and the original event as the second parameter. | | placeholderText | string | The placeholder text that displaying in search box | | variant | "standard"\|"filled"\|"outlined" | The variant of the outer input field | | apiBaseUrl | string \| URL | The base URL of the Iconify API. You can use a backup host or a self hosted URL. The default value is https://api.iconify.design. Please support iconfiy. | | initIcons | string[] | Icon list to display when opening the icon selector popup. | | prefixes | string | Filter the icon results. Comma separated list of icon set prefixes. You can use partial prefixes that end with "-", such as "mdi-" matches "mdi-light". | | prefix | string | Filter the icon results. Icon set prefix if you want to get result only for one icon set. | | category | string | Filter the icon results. Limit search to icon sets from specific category. | | limit | number | The number of icons receiving in one API call. | | inputProps | OutlinedInputProps \| FilledInputProps \| InputProps | Control the outer wrapper. | | popoverProps | PopoverProps | Control the popover component. | | slots.loading | React.ComponentType | A react component to display when items loading | | slots.error | React.ComponentType | A react component to display when an error occurred when searching |

All the props are optional.