Angular UI Bootstrap Iconpicker

Created by Justin Lau

Basic Usage

<div class="form-group">
  <ui-iconpicker ng-model="iconClass"></ui-iconpicker>
</div>

<div class="form-group">
  <input class="form-control" type="text" ng-model="iconClass" />
</div>

Using with Default Values

<div class="form-group">
  <ui-iconpicker value="glyphicon glyphicon-heart"></ui-iconpicker>
  <ui-iconpicker value="glyphicon glyphicon-star"></ui-iconpicker>
</div>

Input Group

<div class="form-group">
  <div class="input-group">
    <span class="input-group-btn">
      <ui-iconpicker ng-model="iconClass"></ui-iconpicker>
    </span>
    <input class="form-control" type="text" ng-model="iconClass" />
  </div>
</div>

With Styles

<div class="form-group">
  <ui-iconpicker class="brand-default"></ui-iconpicker>
  <ui-iconpicker class="brand-primary"></ui-iconpicker>
  <ui-iconpicker class="brand-success"></ui-iconpicker>
  <ui-iconpicker class="brand-info"></ui-iconpicker>
  <ui-iconpicker class="brand-warning"></ui-iconpicker>
  <ui-iconpicker class="brand-danger"></ui-iconpicker>
  <ui-iconpicker disabled></ui-iconpicker>
</div>

Using in Forms

Tips: watch the query parameters on the page url

<form action="#" method="GET">
  <div class="form-group">
    <ui-iconpicker name="icon_class"></ui-iconpicker>
    <button class="btn btn-default" type="submit">Test</button>
    <p class="help-block">Tips: watch the query parameters on the page url</p>
  </div>
</form>

Using with Font Awesome

Using Font Awesome Icons only

With default value

Using Bootstrap and Font Awesome Icons

<div class="form-group">
  <ui-iconpicker groups="font-awesome"></ui-iconpicker>
  <p class="help-block">Using Font Awesome Icons only</p>
</div>

<div class="form-group">
  <ui-iconpicker groups="font-awesome" value="fa fa-heart-o fa-lg"></ui-iconpicker>
  <p class="help-block">With default value</p>
</div>

<div class="form-group">
  <ui-iconpicker groups="bootstrap font-awesome"></ui-iconpicker>
  <p class="help-block">Using Bootstrap and Font Awesome Icons</p>
</div>