- Largely inspired by ngx-color-picker
Angular IconPicker Directive/Component with no dependencies required.
This is an Icon Picker Directive/Component for Angular 13.3+.
The icon Picker manages Font Awesome, Bootstrap Glyphicon, Font Awesome 5 (5.15.4) and Material Icons.
npm install ngx-icon-picker --save
import { IconPickerModule } from 'ngx-icon-picker';
@NgModule({
...
imports: [
...
IconPickerModule
]
})<input [iconPicker]="icon" (iconPickerSelect)="onIconPickerSelect(newIcon)"/>Available inputs and output :
[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 / Font Awesome5 / Font Awesome6 / Bootstrap Glyphicon / Material / Prime): 'fa', 'fa5', 'fa6', 'bs', 'mat', 'pi', '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:
[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 frameworkVersion of @angular/cli used is V15.0.2.
- Generate a new project (here we use LESS preprocessor):
ng new myproject --style less cd myproject- Update package.json with:
"bootstrap": "3.3.7",
"@fortawesome/fontawesome-free": "5.15.4",or with npm command:
npm install --save [email protected]
npm install --save @fortawesome/[email protected]- Install dependancies:
yarn install(ornpm install). - Update styles.less with:
@import '~bootstrap/less/bootstrap.less';
@import '~@fortawesome/fontawesome-free/less/fontawesome.less';- Import IconPickerModule in
app.module.ts(also CommonModule and ReactiveFormsModule):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { IconPickerModule } from 'ngx-icon-picker/dist/index';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
BrowserModule,
IconPickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- Update the template
app.component.html:
<div class="container">
<div [formGroup]="myFormGroup">
<label>Icon</label>
<div class="input-group">
<span class="input-group-addon"><i [ngClass]="iconCss.value"></i></span>
<input type="text" name="iconCss" class="form-control"
formControlName="iconCss"
[iconPicker]="iconCss.value"
[ipPosition]="'bottom'"
[ipWidth]="'250px'"
[ipIconSize]="'16px'"
[ipIconVerticalPadding]="'6px'"
[ipIconHorizontalPadding]="'10px'"
[ipKeepSearchFilter]="'false'"
[ipPlaceHolder]="'Choose an icon'"
[ipFallbackIcon]="fallbackIcon"
(iconPickerSelect)="onIconPickerSelect($event)"/>
</div>
</div>
</div>Note: A class for the icon button can be define to override the CSS: ip-button-icon
- Update the component
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector : 'app-root',
templateUrl: './app.component.html',
styleUrls : ['./app.component.less']
})
export class AppComponent implements OnInit {
myFormGroup: FormGroup;
iconCss = new FormControl();
fallbackIcon = 'fas fa-user';
ngOnInit(): void {
this.myFormGroup = new FormGroup({iconCss: this.iconCss});
}
onIconPickerSelect(icon: string): void {
this.iconCss.setValue(icon);
}
}- Start your project with
yarn start(ornpm start) and go to localhost:4200
- You should now be able to change icon by clicking input field :
To run the example or to validate your development with the example, you have to build the library:
npm install
npm run build3 examples are available:
- app : based on bootstrap usage. It's the framework used to design the icon picker.
- app-bulma : based on bulma framework
- app-semantic : based on semantic framework.
app is the default application based on boostrap. You will find a multiple of example tu use the icon picker.
To start the server:
npm startgo to localhost:4200
Source are availble in projects/app
app-bulma is an application based on Bulma framework. You will find an example to define each class to override the default framework.
To override the bootstrap design, we use ipButtonStyleClass, ipDivSearchStyleClass and ipInputSearchStyleClass.
<div class="columns">
<div class="column is-one-third">
<div [formGroup]="myFormGroup">
<div class="field">
<div class="control has-icons-left">
<input type="text" name="iconCssDefault" formControlName="iconCssDefault" class="input is-primary"
[iconPicker]="iconCssDefault.value"
[ipIconPack]="['fa5']"
[ipPosition]="'bottom'"
[ipWidth]="'250px'"
[ipPlaceHolder]="'Choose an icon'"
[ipFallbackIcon]="fallbackIconDefault"
[ipButtonStyleClass]="'button is-link is-light'"
[ipDivSearchStyleClass]="'control'"
[ipInputSearchStyleClass]="'input is-primary'"
(iconPickerSelect)="onIconPickerDefaultSelect($event)"
/>
<span class="icon is-small is-left">
<i [ngClass]="iconCssDefault.value"></i>
</span>
</div>
</div>
</div>
</div>To start the server:
npm run start-semanticgo to localhost:4200
Source are availble in projects/app-semantic
app-semantic is an application based on Semantic UI framework. You will find an example to define each class to override the default framework.
To override the bootstrap design, we use ipButtonStyleClass, ipDivSearchStyleClass and ipInputSearchStyleClass.
<div [formGroup]="myFormGroup">
<div class="ui horizontal label">Icon</div>
<div class="ui left icon input">
<input type="text" name="iconCssDefault" formControlName="iconCssDefault"
[iconPicker]="iconCssDefault.value"
[ipIconPack]="['fa5']"
[ipPosition]="'bottom'"
[ipWidth]="'250px'"
[ipPlaceHolder]="'Choose an icon'"
[ipFallbackIcon]="fallbackIconDefault"
[ipButtonStyleClass]="'ui primary basic button'"
[ipDivSearchStyleClass]="'ui fluid focus input'"
[ipInputSearchStyleClass]="''"
(iconPickerSelect)="onIconPickerDefaultSelect($event)"
/>
<i class="icon" [ngClass]="iconCssDefault.value"></i>
</div>
</div>
</div>To start the server:
npm run start-semanticgo to localhost:4200
Source are availble in projects/app-semantic
After cloning this repository and modify the source, to test this libary with a local build, you have to type :
npm install
npm run buildThe library will be build
Go in your project and type npm install NGX_ICON_PICKER_PATCH where NGX_ICON_PICKER_PATCH is the ngx-icon-picker path repository (example: /git/ngx-icon-picker).
The local build will be installed in your project.
Edit version in package.json (root and lib). Duplicate the README.md files
npm install
ng lint
npm run prepare
npm run publishSource are available in projects/lib
NoelToy: https://github.com/NoelToy/
Shahmir Noorani: https://github.com/shahmirn/
Phoosha https://github.com/Phoosha/
Sébastien Bousquet https://github.com/sebbousquet
rodrigokamada https://github.com/rodrigokamada
Jakob Schade https://github.com/ProfEibe
Jaume https://github.com/jaumarar
Michael Marcuccio https://github.com/michaelmarcuccio
Evgenii Egorov https://github.com/eewegorov