ui-iconpicker

Bootstrap 3 Icon Picker for AngularJS

Usage no npm install needed!

<script type="module">
  import uiIconpicker from 'https://cdn.skypack.dev/ui-iconpicker';
</script>

README

ui-iconpicker - Bootstrap 3 Icon Picker for AngularJS

Bower version devDependencies Status

ui-iconpicker is a Bootstrap (and optionally Font Awesome) icons picking component implemented in AngularJS.

Demo

To see the directive in action, visit http://justin-lau.github.io/ui-iconpicker/.

Usage

Dependencies

ui-iconpicker depends only on Angular UI Bootstrap, and thus also depends on AngularJS and Bootstrap's CSS. It also supports Font Awesome icons.

Installation

Normally you would use ui-iconpicker like this:

<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- Font-Awesome CSS (Optional) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <!-- AngularJS CSP CSS -->
    <link rel="stylesheet" href="//rawgithub.com/angular/code.angularjs.org/master/1.2.16/angular-csp.css">
    <!-- ui-iconpicker CSS -->
    <link rel="stylesheet" href="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/styles/ui-iconpicker.min.css">
</head>
<body ng-app>
    <!-- Body Content -->

    <!-- AngularJS Script -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <!-- Angular UI Boostrap Script -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <!-- ui-iconpicker Script -->
    <script type="text/javascript" src="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/scripts/ui-iconpicker.min.js"></script>
    <script>
        
        // load ui-iconpicker as Angular dependency
        angular.module('myModule', ['ui-iconpicker']);

    </script>
</body>
</html>

ui-iconpicker also supports the AMD API (RequireJS), the same scripts from above would look like the following with RequireJS:

require.config({
    paths: {
        'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min',
        'angular-bootstrap': '//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min',
        'ui-iconpicker': '//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/scripts/ui-iconpicker.min',
    },

    shim: {
        'angular': {
            exports: 'angular',
        },
        'angular-bootstrap': {
            deps: ['angular'],
        },
    },
});

require(['angular', 'ui-iconpicker'], function (angular) {

    // load ui-iconpicker as Angular dependency
    angular.module('myModule', ['ui-iconpicker']);

});