ui-iconpicker is a Bootstrap (and optionally Font Awesome) icons picking component implemented in AngularJS.
To see the directive in action, visit http://justin-lau.github.io/ui-iconpicker/.
ui-iconpicker depends only on Angular UI Bootstrap, and thus also depends on AngularJS and Bootstrap's CSS. It also supports Font Awesome icons.
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']);
});