ui-iconpicker - Bootstrap 3 Icon Picker for AngularJS
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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgithub.com/angular/code.angularjs.org/master/1.2.16/angular-csp.css">
<link rel="stylesheet" href="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/styles/ui-iconpicker.min.css">
</head>
<body ng-app>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/scripts/ui-iconpicker.min.js"></script>
<script>
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) {
angular.module('myModule', ['ui-iconpicker']);
});