From a05aa7c9f9741da1b92f90f54d43c0399da96f9e Mon Sep 17 00:00:00 2001
From: Ed Pelc <ed@freightchick.com>
Date: Fri, 14 Apr 2017 11:34:37 -0400
Subject: [PATCH] docs(guides): add guide for using compatibility mode (#4082)

Fixes #4018
---
 guides/compatibility-mode.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 guides/compatibility-mode.md

diff --git a/guides/compatibility-mode.md b/guides/compatibility-mode.md
new file mode 100644
index 000000000000..8ea4d3fe912a
--- /dev/null
+++ b/guides/compatibility-mode.md
@@ -0,0 +1,19 @@
+## What is compatibility mode?
+Compatibility mode for `@angular/material` allows the components to exist side-by-side with AngularJS Material components without any CSS collisions.
+
+## What does compatibility mode do?
+When enabled, compatibility mode enforces that all template APIs use the prefix `mat-` instead of `md-`. This will prevent any CSS from AngularJS Material from affecting the components in `@angular/material`.
+
+## How is compatibility mode enabled?
+Import `NoConflictStyleCompatibilityMode` into your application's root `NgModule`.
+
+
+## Example
+
+```html
+<!-- Regular mode -->
+<button md-button mdTooltip="With a tooltip">Regular button</button>
+
+<!-- In compatibility mode -->
+<button mat-button matTooltip="With a compatibility mode tooltip">Compatibility Mode button</button>
+```