Added support for Google Material design icons

README.md

@@ -21,7 +21,7 @@ Add `pretty.min.css` in your html
 
 From CDN,
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.0/pretty.min.css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.1/pretty.min.css"/>
 ```
 or from the source,
 ```html
@@ -70,7 +70,7 @@ Refer the [Documentation](https://lokesh-coder.github.io/pretty-checkbox/) for o
 
 ### Custom font library
 
-This library supports wide variety of font icon libraries. Currently tested with `FontAwesome` , `Bootstrap Glyphicon` , `Material Design icons (mdi)` , `Material Design icons (zmdi)` , `Typicons` , `Ionicons`.
+This library supports wide variety of font icon libraries. Currently tested with `FontAwesome` , `Bootstrap Glyphicon` , `Google Material Design icons(material.io)`, `Material Design icons (mdi)` , `Material Design icons (zmdi)` , `Typicons` , `Ionicons`.
 
 ### What else
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pretty-checkbox",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library",
   "main": "src/pretty.min.css",
   "dependencies": {},

src/pretty.css

@@ -1,3 +1,17 @@
+.pretty > input + label > i.g-mdi:before,
+.pretty > input + label + label > i.g-mdi:before {
+  content: attr(data-icon);
+  display: inline-block;
+  font: normal normal normal 24px/1 "Material Icons";
+  font-size: inherit;
+  text-rendering: auto;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+
 @media print {
   .pretty > input:not(:checked) + label i:before {
     -webkit-print-color-adjust: exact;

src/scss/support/_extend.scss

@@ -0,0 +1,14 @@
+.#{$pretty--class-name} {
+	& > input + label>i.#{$pretty--gmdi-class-name}:before,
+	& > input + label+label > i.#{$pretty--gmdi-class-name}:before{
+		content:attr(#{$pretty--gmdi-attr});
+		display: inline-block;
+	    font: normal normal normal 24px/1 $pretty--gmdi-name;
+	    font-size: inherit;
+	    text-rendering: auto;
+	    line-height: inherit;
+	    -webkit-font-smoothing: antialiased;
+	    -moz-osx-font-smoothing: grayscale;
+	    transform: translate(0, 0);
+	}
+}

src/scss/support/_index.scss

@@ -1,4 +1,5 @@
 @import 'variables';
 @import 'mixins';
+@import 'extend';
 @import 'animations';
 @import 'print';   

src/scss/support/_variables.scss

@@ -11,4 +11,8 @@ $pretty--color-border: #b9b9b9 !default;
 $pretty--color-radio: #b9b9b9 !default;
 $pretty--color-bg: #fff !default;
 
+$pretty--gmdi-class-name:'g-mdi';
+$pretty--gmdi-name:'Material Icons';
+$pretty--gmdi-attr:'data-icon';
+
 $outline-colors: (primary o-primary $pretty--color-primary, success o-success $pretty--color-success, info o-info $pretty--color-info, warning o-warning $pretty--color-warning, danger o-danger $pretty--color-danger);