ngx-icon-pickr v1.1.1

Prerequisites

Icon Picker will work in angular projects.

Table of Contents

• Installation
• Import Style
• Import Modules
• Pickr Options

Installation

$ npm i bulma-iconpicker --save
$ npm install ngx-icon-pickr --save

Import style

To use scss import it.

@import 'node_modules/ngx-icon-pickr/pickr';

To use css import it into angular.json .

'node_modules/ngx-icon-pickr/pickr/pickr.css';

Import modules

To work on form it is require to import NgxIconPickrModule which provides advanced/dynamic level validation features. All modules register in the NgModule decorator imports property.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { NgxIconPickrModule } from 'ngx-icon-pickr'; // <-- #1 import module

import {AppComponent} from './app.component';

@NgModule({
  declarations:[AppComponent],
  imports:[ BrowserModule,
	NgxIconPickrModule
	]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Pickr Options

Pickr Option is used, when we need to add more or custom font icons.

let iconPickerOptions = {
  iconSets: [ {
    name: 'simpleLine', // Name displayed on tab
    css: 'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css', // CSS url containing icons rules
    prefix: 'icon-', // CSS rules prefix to identify icons
    displayPrefix: ''
  },
  {
    name: 'fontAwesome', // Name displayed on tab
    css: 'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css', // CSS url containing icons rules
    prefix: 'fa-', // CSS rules prefix to identify icons
    displayPrefix: 'fa fa-icon'
  } ]
};

app.component.html

<ngx-icon-picker [option]="option" [value]="value"></ngx-icon-picker>

app.component.ts

import { Component } from '@angular/core';
import { NgxIconPickerOption } from 'ngx-icon-pickr';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Ngx Icon Picker';
  value = 'fa fa-icon fa-star';
  option: NgxIconPickerOption = {
    iconSets: [
      {
        name: 'mdi',
        css:
          'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.5.95/css/materialdesignicons.css',
        prefix: 'mdi-',
        displayPrefix: ''
      }
    ]
  };
}