IconPicker - default search with . Additional prop to switch the search to

Author: AJIXuMuK

docs/documentation/docs/controls/IconPicker.md

@@ -54,5 +54,6 @@ The IconPicker component can be configured with the following properties:
 | 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' defualt value 'Panel' |
+| useStartsWithSearch | boolean | no | Specifies if we need to use `startsWith` when searching for the icons. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IconPicker)

src/controls/iconPicker/IIconPickerProps.ts

@@ -31,4 +31,9 @@ export interface IIconPickerProps {
      * irender option:  panel, dialog
      */
     renderOption?: 'panel' | 'dialog';
+    /**
+     * Specifies if we need to use `startsWith` when searching for the icons.
+     * Default: false
+     */
+    useStartsWithSearch?: boolean;
 }

src/controls/iconPicker/IconPicker.tsx

@@ -138,7 +138,7 @@ export class IconPicker extends React.Component<IIconPickerProps, IIconPickerSta
   private onChange = (newValue?: string): void => {
     let items: string[];
     if (newValue && newValue.trim().length > 2) {
-      items = this._fluentIconsService.search(newValue); /*IconNames.Icons.filter(item => {
+      items = this._fluentIconsService.search(newValue, this.props.useStartsWithSearch); /*IconNames.Icons.filter(item => {
         return item.toLocaleLowerCase().indexOf(newValue.toLocaleLowerCase()) !== -1;
       });*/
     } else {

src/services/FluentIconsService.ts

@@ -20,7 +20,7 @@ export class FluentIconsService {
 
   public search = (query: string, startsWith?: boolean): string[] => {
     const lowerCasedQuery = query.toLowerCase();
-    return this._iconNames.filter(name => startsWith === false ? name.toLowerCase().indexOf(lowerCasedQuery) !== -1 : name.toLowerCase().indexOf(query) === 0);
+    return this._iconNames.filter(name => !startsWith ? name.toLowerCase().indexOf(lowerCasedQuery) !== -1 : name.toLowerCase().indexOf(query) === 0);
   }
 }