

IconPicker control¶

Property pane icon picker control that allows to search and select an icon from office-ui-fabric-react icons.

Overview¶

The control allows selecting an icon from the list of icons available in the office-ui-fabric-react library. Icon list is a static copy of available icons. Currently, only one icon selection is supported. Icon Picker overview

Displayed in the panel¶

Icon picker always opens a new panel where you can pick an icon. The panel displays all the icons and maintains readability. Picker does not displays selected icon outside the panel. Icon Picker panel

How to use this control¶

Check that you installed the @pnp/spfx-property-controls dependency. Check out the getting started page for more information about installing the dependency.
Import the following module to your component:

import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';

Use the PropertyFieldIconPicker control in your code as follows:

PropertyFieldIconPicker('iconPicker', {
                  currentIcon: this.properties.iconPicker,
                  key: "iconPickerId",
                  onSave: (icon: string) => { console.log(icon); this.properties.iconPicker = icon; },
                  onChanged:(icon: string) => { console.log(icon);  },
                  buttonLabel: "Icon",
                  renderOption: "panel",
                  properties: this.properties,
                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
                  label: "Icon Picker"              
                }),

Implementation¶

The PropertyFieldIconPicker component can be configured with the following properties:

Property	Type	Required	Description
buttonLabel	string	no	Specifies the label of the icon picker button.
onSave	(iconName: string) => void	yes	Handler when the icon has been selected and picker has been closed.
onChanged	(iconName: string) => void	no	Handler when the icon selection has been changed.
disabled	boolean	no	Specifies if the picker button is disabled
buttonClassName	boolean	no	If provided, additional class name will be added to the picker button
panelClassName	boolean	no	If provided, additional class name will be added to the picker panel
currentIcon	string	no	Specifies default selected icon
renderOption	`dialog`, `panel`	no	Specifies how to render list of Icons, Values : 'Panel' or 'Dialog' default value 'Panel'
onPropertyChange	function	yes	Defines a `onPropertyChange` function to raise when the teams get changed.
properties	any	yes	Parent web part properties, this object is used to update the property value.
key	string	yes	An unique key that indicates the identity of this control.
label	string	no	A label to describe the icon picker control.