feat(material-icon): Add [material-icon] directive

Apply the "material-icons" style to an icon. *Note: must be using the material icons library

src/lib/index.ts

@@ -7,6 +7,7 @@ import { ElevationModule } from './elevation/index';
 import { FabModule } from './fab/index';
 import { FormFieldModule } from './form-field/index';
 import { LinearProgressModule } from './linear-progress/index';
+import { MaterialIconModule } from './material-icon/index';
 import { MenuModule } from './menu/index';
 import { RadioModule } from './radio/index';
 import { RippleModule } from './ripple/index';
@@ -24,6 +25,7 @@ export * from './elevation/index';
 export * from './fab/index';
 export * from './form-field/index';
 export * from './linear-progress/index';
+export * from './material-icon/index';
 export * from './menu/index';
 export * from './radio/index';
 export * from './ripple/index';
@@ -42,6 +44,7 @@ const MATERIAL_MODULES = [
   FabModule,
   FormFieldModule,
   LinearProgressModule,
+  MaterialIconModule,
   MenuModule,
   RadioModule,
   RippleModule,
@@ -61,4 +64,4 @@ const MATERIAL_MODULES = [
     MATERIAL_MODULES
   ]
 })
-export class MaterialModule { }
+export class MaterialModule { }

src/lib/material-icon/index.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { MaterialIcon } from './material-icon.directive';
+
+@NgModule({
+  exports: [MaterialIcon],
+  declarations: [MaterialIcon],
+})
+export class MaterialIconModule { }

src/lib/material-icon/material-icon.directive.ts

@@ -0,0 +1,11 @@
+import {
+  Directive,
+  HostBinding,
+} from '@angular/core';
+
+@Directive({
+  selector: '[material-icon]'
+})
+export class MaterialIcon {
+  @HostBinding('class.material-icons') isHostClass = true;
+}