<commit_before># Angular Icon Picker

[![Build Status](https://travis-ci.org/tech-advantage/ngx-icon-picker.svg?branch=master)](https://travis-ci.org/tech-advantage/ngx-icon-picker)
[![NPM Version](https://badge.fury.io/js/ngx-icon-picker.svg)](https://npmjs.org/package/ngx-icon-picker)

* Largely inspired by [ngx-color-picker](https://github.com/zefoy/ngx-color-picker)

![demo_02](https://github.com/tech-advantage/ngx-icon-picker/blob/master/doc/demo_02.jpg)

Angular IconPicker Directive/Component with no dependencies required.

This is an Icon Picker Directive/Component for Angular 9+.

The icon Picker manages Font Awesome, Bootstrap Glyphicon and Font Awesome5.

## Installing and usage

   npm install ngx-icon-picker --save

### Load the module for your app

```typescript
import { IconPickerModule } from 'ngx-icon-picker';

@NgModule({
  ...
  imports: [
    ...
    IconPickerModule
  ]
})
```

### Use it in your HTML template

```html
<input [iconPicker]="icon" (iconPickerSelect)="onIconPickerSelect(newIcon)"/>
```

Available inputs and output :

```typescript
[iconPicker]                // The icon to select in the grid.

[ipWidth]                   // Use this option to set icon picker dialog width (default: '230px').
[ipHeight]                  // Use this option to force icon picker dialog height (default: 'auto').
[ipMaxHeight]               // Use this option to force icon picker dialog max-height (default: '200px').

[ipIconPack]                // Icon pack (Font Awesome / Bootstrap Glyphicon / Font AWesome5): 'fa', 'bs', 'fa5', 'all' (default: ['bs', 'fa5']).
[ipIconSize]                // Set the icon size in the selector (default: '16px')
[ipIconVerticalPadding]     // Set the top and bottom padding (default: '6px') 
[ipIconHorizontalPadding]   // Set the left and right button padding (default: '10px') 
[ipKeepSearchFilter]        // The search filter keep the value to filter  (default: 'false')    

[ipFallbackIcon]            // Is used when the icon is undefined (default: 'fas fa-user').
[ipPosition]                // Dialog position: 'right', 'left', 'top', 'bottom' (default: 'right').
[ipPlaceHolder]             // Search input placeholder (default: 'Search icon...').

(iconPickerSelect)          // On selected icon value.
```

To integrate the icon picker with an another framework, you have to use the extra inputs:

```typescript
[ipButtonStyleClass]              // To override the bootstrap class for the button. Use only to change the framework
[ipDivSearchStyleClass]     // To override the bootstrap class for the div search. Use only to change the framework
[ipInputSearchStyleClass]   // To override the bootstrap class for the input search. Use only to change the framework
```<commit_msg>Mention the Material support in the README<commit_after># Angular Icon Picker

[![Build Status](https://travis-ci.org/tech-advantage/ngx-icon-picker.svg?branch=master)](https://travis-ci.org/tech-advantage/ngx-icon-picker)
[![NPM Version](https://badge.fury.io/js/ngx-icon-picker.svg)](https://npmjs.org/package/ngx-icon-picker)

* Largely inspired by [ngx-color-picker](https://github.com/zefoy/ngx-color-picker)

![demo_02](https://github.com/tech-advantage/ngx-icon-picker/blob/master/doc/demo_02.jpg)

Angular IconPicker Directive/Component with no dependencies required.

This is an Icon Picker Directive/Component for Angular 9+.

The icon Picker manages Font Awesome, Bootstrap Glyphicon, Font Awesome5 and Material Icons.

## Installing and usage

   npm install ngx-icon-picker --save

### Load the module for your app

```typescript
import { IconPickerModule } from 'ngx-icon-picker';

@NgModule({
  ...
  imports: [
    ...
    IconPickerModule
  ]
})
```

### Use it in your HTML template

```html
<input [iconPicker]="icon" (iconPickerSelect)="onIconPickerSelect(newIcon)"/>
```

Available inputs and output :

```typescript
[iconPicker]                // The icon to select in the grid.

[ipWidth]                   // Use this option to set icon picker dialog width (default: '230px').
[ipHeight]                  // Use this option to force icon picker dialog height (default: 'auto').
[ipMaxHeight]               // Use this option to force icon picker dialog max-height (default: '200px').

[ipIconPack]                // Icon pack (Font Awesome / Bootstrap Glyphicon / Font AWesome5 / Material): 'fa', 'bs', 'fa5', 'mat', 'all' (default: ['bs', 'fa5']).
[ipIconSize]                // Set the icon size in the selector (default: '16px')
[ipIconVerticalPadding]     // Set the top and bottom padding (default: '6px') 
[ipIconHorizontalPadding]   // Set the left and right button padding (default: '10px') 
[ipKeepSearchFilter]        // The search filter keep the value to filter  (default: 'false')    

[ipFallbackIcon]            // Is used when the icon is undefined (default: 'fas fa-user').
[ipPosition]                // Dialog position: 'right', 'left', 'top', 'bottom' (default: 'right').
[ipPlaceHolder]             // Search input placeholder (default: 'Search icon...').

(iconPickerSelect)          // On selected icon value.
```

To integrate the icon picker with an another framework, you have to use the extra inputs:

```typescript
[ipButtonStyleClass]              // To override the bootstrap class for the button. Use only to change the framework
[ipDivSearchStyleClass]     // To override the bootstrap class for the div search. Use only to change the framework
[ipInputSearchStyleClass]   // To override the bootstrap class for the input search. Use only to change the framework
```
{'fraction_non_alphanumeric': 0.1256047303350654, 'fraction_numerical': 0.007167174341515857, 'mean_word_length': 3.2578184591914567, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2028165', 'n_tokens_mistral': 1678, 'n_tokens_neox': 1601, 'n_words': 554}