icon-select

Welcome to ICon Select!

Have you ever wanted to have an easy to use component that looks exactly (almost) like a select tag with the added benefit of showing icons instead of words? Have you wanted to transform a select tag into a more meaningful dropdown when it comes to have a list of images to pick? If so, then welcome to Icon Select!

Live Demo | Source code

Version 0.0.1

MODULE:
    ISelectModule

EXPORTS
	ISelect,
    ISelectDirective
	
DEPENDENCIES: 
    "font-awesome": "^4.7.0"

So... How it can be done?

Run npm install iselect in your application. and do either of the following:

Sample usage through using i-select component or i-select directive.

    <i-select 
      id="backgroundPicker" 
      name="selectedBackground" 
      [size]="6" 
      [multiselect]="false" 
      [entries]="iconpickeData"
      [searchEnabled]="true" 
      (onchange)="updateSelection($event)">
    </i-select>
  
    <select i-select 
        id="overlayPicker1" size="6" name="selectedOverlay"
        [searchEnabled]="false" 
        (change)="updateOverlay($event)" >
      <option *ngFor="let x of iconpickeOverlay" [value]="x.value" [textContent]="x.name"></option>
    </select>

It is that simple..!!

Sample view of the component at work!