Angular IconPicker Directive/Component with no dependencies required.
This is an Icon Picker Directive/Component for Angular.
The icon Picker manages Font Awesome, Font Awesome 5 (5.15.4) and Material Icons.
Version | Angular | Pack |
---|---|---|
1.11.x | v16+ | Font Awesome / Font Awesome5 / Font Awesome6 / Material / Prime |
1.10.x | v13.3 - V15 | Font Awesome / Font Awesome5 / Font Awesome6 / Bootstrap Glyphicon / Material / Prime |
1.9.x | v13.3 - V15 | Font Awesome / Font Awesome5 / Bootstrap Glyphicon / Material / Prime |
1.8.x | v13 - V13.3 | Font Awesome / Font Awesome5 / Bootstrap Glyphicon / Material / Prime |
1.7.x | v11 - V13 | Font Awesome / Font Awesome5 / Bootstrap Glyphicon / Material / Prime |
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 / Material / Prime): 'fa', 'fa5', 'fa6', '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.
(iconPickerOpen) // On open popup
(iconPickerClose) // On close popup
(iconPickerClose) // On focus element
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 framework
Version of @angular/cli used is V15.0.2.
ng new myproject --style less
cd myproject
"bootstrap": "3.3.7",
"@fortawesome/fontawesome-free": "5.15.4",
or with npm command:
npm install --save bootstrap@3.3.7
npm install --save @fortawesome/fontawesome-free@5.15.4
yarn install
(or npm install
).@import '~bootstrap/less/bootstrap.less';
@import '~@fortawesome/fontawesome-free/less/fontawesome.less';
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 { }
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
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);
}
}
yarn start
(or npm start
) and go to localhost:4200To run the example or to validate your development with the example, you have to build the library:
npm install
npm run build
3 examples are available:
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 start
go 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-semantic
go 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-semantic
go 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 build
The 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 publish
Source 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