npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-icon-picker-18

v1.18.11

Published

[![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)

Downloads

303

Readme

Angular Icon Picker

Build Status NPM Version

demo_02

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 compatibility

| 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 |

Installing and usage

npm install ngx-icon-picker --save

Load the module for your app

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

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

Use it in your HTML template

<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

Installing from a brand new @angular/cli project based on Bootstrap

Version 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 (or npm 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 (or npm start) and go to localhost:4200

demo_01

  • You should now be able to change icon by clicking input field :

demo_02

demo_03

demo_04

Examples

To 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 : 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

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

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

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

How do I test in my own project?

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.

Build the library for production

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

Contributors

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