angular-material-checkbox

Simple angular check-box/toggle button directive using Google material design icons.

Click Here for demo.

###Key Features

• Uses Google material font icons to show checkbox in div
• Shows just a checkbox or checkbox with inline label
• Label is also clickable
• Older IE(tested in IE 7+) support if icons used in specific way
• Easy to use & fully customizable

Getting Started

Download the package, and include the /checkbox-directive.js file in your page.

bower install angular-material-checkbox --save

Then add material icons with following line in your index.html head section:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Also add the sb.checkbox as dependency to your Angular App main module, e.g.

var app = angular.module('app', ['sb.checkbox']);

Usage(With minimum options)

As an element(For newer HTML5 browsers):

<sb-checkbox
	label="test label"
	ng-model="user.test1"
 />
<span> model value: {{user.test1}} </span>

As an attribute(If you want to support older IE, also use angular 1.2.8):

<!-- Used as attribute to support <=IE9 versions -->
<div sb-checkbox label="test labrl"
	 			 ng-model="user.test1">
</div>
<span> model value: {{user.test1}} </span>

NOTE: sb-checkbox class is added in check-box container div you can override it to apply custom css.

Description of attributes

Attribute	Description	Required	Example
ng-model	model of checkbox	Yes	choices.checkbox1
checked-icon-name	Google material design icon name for checked state	No	check_circle, check_box OR  ,  (For IE 9 or below)
unchecked-icon-name	Google material design icon name for unchecked state	No	radio_button_unchecked, check_box_outline_blank OR  ,  (For IE 9 or below)
checked-icon-color	Icon color in hex for checked state	No	'#009688'
unchecked-icon-color	Icon color in hex for unchecked state	No	'#B2DFDB'
size	size of checkbox	No	small, medium or large
pre-selected	if 'true' checkbox will be selected at start, defaults to false	No	true OR false
show-label	Don't show label if false, defaults to true	No	true OR false