diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index b459edf7f..ea6997f58 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -78,13 +78,6 @@ module.exports = [{
       }, {
           test: /\.html$/,
           loader: 'html-loader'
-      }, {
-        test: /\.(png|jpg|svg)$/,
-        loader: "file-loader",
-        options: {
-          name: '[path][name].[ext]',
-          publicPath: 'assets/'
-        }
       }, {
           test: /\.scss$/,
           use: ExtractTextPlugin.extract({
diff --git a/package-lock.json b/package-lock.json
index 6db579ae7..67ab086f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4340,29 +4340,6 @@
         "object-assign": "4.1.1"
       }
     },
-    "file-loader": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.4.tgz",
-      "integrity": "sha512-E4mCBrAVk8pB6VmuCW/rbHvtQDy2sknh0G4c2c449Q5qC7fCkL1P6sZGxQXWPaAxXBdU8WsTzPEB973Ei8vkxg==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "1.1.0",
-        "schema-utils": "0.3.0"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
-          "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
-          "dev": true,
-          "requires": {
-            "big.js": "3.2.0",
-            "emojis-list": "2.1.0",
-            "json5": "0.5.1"
-          }
-        }
-      }
-    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
diff --git a/package.json b/package.json
index 30b8f7928..8f33135fe 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "css-loader": "^0.28.7",
     "cz-conventional-changelog": "2.0.0",
     "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
     "focus-trap": "^2.3.0",
     "glob": "^7.1.2",
     "html-loader": "^0.5.1",
@@ -136,12 +135,14 @@
           "button",
           "card",
           "checkbox",
+          "core",
           "dialog",
           "drawer",
           "elevation",
           "fab",
           "form-field",
           "grid-list",
+          "icon",
           "icon-toggle",
           "layout-grid",
           "linear-progress",
diff --git a/src/demo-app/demo-material.module.ts b/src/demo-app/demo-material.module.ts
index 1fd15f06d..b7f487cd6 100644
--- a/src/demo-app/demo-material.module.ts
+++ b/src/demo-app/demo-material.module.ts
@@ -11,7 +11,7 @@ import {
   MdcIconToggleModule,
   MdcLinearProgressModule,
   MdcListModule,
-  MdcMaterialIconModule,
+  MdcCoreModule,
   MdcMenuModule,
   MdcRadioModule,
   MdcSliderModule,
@@ -21,10 +21,9 @@ import {
   MdcTextfieldModule,
   MdcThemeModule,
   MdcToolbarModule,
-  MdcTypographyModule,
   MdcRippleModule,
-} from '@angular-mdc/web';
-// } from '../lib/public_api';
+// } from '@angular-mdc/web';
+} from '../lib/public_api';
 
 @NgModule({
   exports: [
@@ -39,7 +38,7 @@ import {
     MdcIconToggleModule,
     MdcLinearProgressModule,
     MdcListModule,
-    MdcMaterialIconModule,
+    MdcCoreModule,
     MdcMenuModule,
     MdcRadioModule,
     MdcSliderModule,
@@ -49,7 +48,6 @@ import {
     MdcTextfieldModule,
     MdcThemeModule,
     MdcToolbarModule,
-    MdcTypographyModule,
     MdcRippleModule,
   ]
 })
diff --git a/src/lib/core/index.ts b/src/lib/core/index.ts
new file mode 100644
index 000000000..b578f073c
--- /dev/null
+++ b/src/lib/core/index.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { MdcMaterialIconModule } from './material-icon/index';
+import { MdcTypographyModule } from './typography/index';
+
+@NgModule({
+  imports: [MdcMaterialIconModule, MdcTypographyModule],
+  exports: [MdcMaterialIconModule, MdcTypographyModule],
+})
+export class MdcCoreModule { }
+
+export * from './public_api';
diff --git a/src/lib/core/material-icon/index.ts b/src/lib/core/material-icon/index.ts
new file mode 100644
index 000000000..71dee7746
--- /dev/null
+++ b/src/lib/core/material-icon/index.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { MdcMaterialIcon } from './material-icon.directive';
+
+@NgModule({
+  exports: [MdcMaterialIcon],
+  declarations: [MdcMaterialIcon],
+})
+export class MdcMaterialIconModule { }
+
+export * from './material-icon.directive';
diff --git a/src/lib/core/material-icon/material-icon.directive.ts b/src/lib/core/material-icon/material-icon.directive.ts
new file mode 100644
index 000000000..1cb783d9c
--- /dev/null
+++ b/src/lib/core/material-icon/material-icon.directive.ts
@@ -0,0 +1,11 @@
+import {
+  Directive,
+  HostBinding,
+} from '@angular/core';
+
+@Directive({
+  selector: '[material-icon]'
+})
+export class MdcMaterialIcon {
+  @HostBinding('class.material-icons') isHostClass = true;
+}
diff --git a/src/lib/core/public_api.ts b/src/lib/core/public_api.ts
new file mode 100644
index 000000000..a3411323f
--- /dev/null
+++ b/src/lib/core/public_api.ts
@@ -0,0 +1,2 @@
+export * from './material-icon/index';
+export * from './typography/index';
diff --git a/src/lib/core/typography/index.ts b/src/lib/core/typography/index.ts
new file mode 100644
index 000000000..432554a81
--- /dev/null
+++ b/src/lib/core/typography/index.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+
+import {
+  MdcAdjustMarginDirective,
+  MdcBody1Directive,
+  MdcBody2Directive,
+  MdcButtonDirective,
+  MdcCaptionDirective,
+  MdcDisplay1Directive,
+  MdcDisplay2Directive,
+  MdcDisplay3Directive,
+  MdcDisplay4Directive,
+  MdcHeadlineDirective,
+  MdcSubheading1Directive,
+  MdcSubheading2Directive,
+  MdcTitleDirective,
+  MdcTypography,
+} from './typography.directive';
+
+const TYPOGRAPHY_DIRECTIVES = [
+  MdcAdjustMarginDirective,
+  MdcBody1Directive,
+  MdcBody2Directive,
+  MdcButtonDirective,
+  MdcCaptionDirective,
+  MdcDisplay1Directive,
+  MdcDisplay2Directive,
+  MdcDisplay3Directive,
+  MdcDisplay4Directive,
+  MdcHeadlineDirective,
+  MdcSubheading1Directive,
+  MdcSubheading2Directive,
+  MdcTitleDirective,
+  MdcTypography,
+];
+
+@NgModule({
+  exports: [TYPOGRAPHY_DIRECTIVES],
+  declarations: [TYPOGRAPHY_DIRECTIVES],
+})
+export class MdcTypographyModule { }
+
+export * from './typography.directive';
diff --git a/src/lib/core/typography/typography.directive.ts b/src/lib/core/typography/typography.directive.ts
new file mode 100644
index 000000000..2b7fc6fc6
--- /dev/null
+++ b/src/lib/core/typography/typography.directive.ts
@@ -0,0 +1,102 @@
+import {
+  Directive,
+  HostBinding,
+} from '@angular/core';
+
+@Directive({
+  selector: '[mdc-typography]'
+})
+export class MdcTypography {
+  @HostBinding('class.mdc-typography') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-adjust-margin]'
+})
+export class MdcAdjustMarginDirective {
+  @HostBinding('class.mdc-typography--adjust-margin') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display4]'
+})
+export class MdcDisplay4Directive {
+  @HostBinding('class.mdc-typography--display4') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display3]'
+})
+export class MdcDisplay3Directive {
+  @HostBinding('class.mdc-typography--display3') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display2]'
+})
+export class MdcDisplay2Directive {
+  @HostBinding('class.mdc-typography--display2') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-display1]'
+})
+export class MdcDisplay1Directive {
+  @HostBinding('class.mdc-typography--display1') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-headline]'
+})
+export class MdcHeadlineDirective {
+  @HostBinding('class.mdc-typography--headline') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-title]'
+})
+export class MdcTitleDirective {
+  @HostBinding('class.mdc-typography--title') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-subheading2]'
+})
+export class MdcSubheading2Directive {
+  @HostBinding('class.mdc-typography--subheading2') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-subheading1]'
+})
+export class MdcSubheading1Directive {
+  @HostBinding('class.mdc-typography--subheading1') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-body2]'
+})
+export class MdcBody2Directive {
+  @HostBinding('class.mdc-typography--body2') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-body1]'
+})
+export class MdcBody1Directive {
+  @HostBinding('class.mdc-typography--body1') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-caption]'
+})
+export class MdcCaptionDirective {
+  @HostBinding('class.mdc-typography--caption') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-typography-button]'
+})
+export class MdcButtonDirective {
+  @HostBinding('class.mdc-typography--button') isHostClass = true;
+}
diff --git a/src/lib/module.ts b/src/lib/module.ts
index b7dc0e034..9fcc09dff 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 
 import { MdcButtonModule } from './button/index';
+import { MdcCoreModule } from './core/index';
 import { MdcCardModule } from './card/index';
 import { MdcCheckboxModule } from './checkbox/index';
 import { MdcDialogModule } from './dialog/index';
@@ -11,7 +12,6 @@ import { MdcFormFieldModule } from './form-field/index';
 import { MdcIconToggleModule } from './icon-toggle/index';
 import { MdcLinearProgressModule } from './linear-progress/index';
 import { MdcListModule } from './list/index';
-import { MdcMaterialIconModule } from './material-icon/index';
 import { MdcMenuModule } from './menu/index';
 import { MdcRadioModule } from './radio/index';
 import { MdcSliderModule } from './slider/index';
@@ -21,11 +21,11 @@ import { MdcTabModule } from './tabs/index';
 import { MdcTextfieldModule } from './textfield/index';
 import { MdcThemeModule } from './theme/index';
 import { MdcToolbarModule } from './toolbar/index';
-import { MdcTypographyModule } from './typography/index';
 
 const MATERIAL_MODULES = [
   MdcButtonModule,
   MdcCardModule,
+  MdcCoreModule,
   MdcCheckboxModule,
   MdcDialogModule,
   MdcDrawerModule,
@@ -35,7 +35,6 @@ const MATERIAL_MODULES = [
   MdcIconToggleModule,
   MdcLinearProgressModule,
   MdcListModule,
-  MdcMaterialIconModule,
   MdcMenuModule,
   MdcRadioModule,
   MdcSliderModule,
@@ -45,7 +44,6 @@ const MATERIAL_MODULES = [
   MdcTextfieldModule,
   MdcThemeModule,
   MdcToolbarModule,
-  MdcTypographyModule,
 ];
 
 /** @deprecated Use public_api */
diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts
index 38b0288af..1b300bc78 100644
--- a/src/lib/public_api.ts
+++ b/src/lib/public_api.ts
@@ -1,5 +1,4 @@
-export * from './module';
-
+export * from './core/index';
 export * from './button/index';
 export * from './card/index';
 export * from './checkbox/index';
@@ -13,7 +12,6 @@ export * from './form-field/index';
 export * from './icon-toggle/index';
 export * from './linear-progress/index';
 export * from './list/index';
-export * from './material-icon/index';
 export * from './menu/index';
 export * from './radio/index';
 export * from './ripple/index';
@@ -24,7 +22,6 @@ export * from './tabs/index';
 export * from './textfield/index';
 export * from './theme/index';
 export * from './toolbar/index';
-export * from './typography/index';
 
 export * from './cdk/overlay/index';
 export * from './cdk/portal/index';
diff --git a/test/unit/typography/typography.test.ts b/test/unit/typography/typography.test.ts
index 988d22e71..c46db056d 100644
--- a/test/unit/typography/typography.test.ts
+++ b/test/unit/typography/typography.test.ts
@@ -74,6 +74,7 @@ describe('MdcTypography', () => {
   <h1 mdc-typography-body1></h1>
   <h1 mdc-typography-caption></h1>
   <h1 mdc-typography-button></h1>
+  <p mdc-typography-adjust-margin></p>
   </div>
   `,
 })