From c0e2b877ef86246c618309d0f25651d13dedb936 Mon Sep 17 00:00:00 2001
From: Austin Andrews <admin@templarian.com>
Date: Sat, 22 Nov 2014 21:20:45 -0600
Subject: [PATCH] Overlay preview.

---
 site/getting-started.savvy | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/site/getting-started.savvy b/site/getting-started.savvy
index af7c6ae77..b577709be 100644
--- a/site/getting-started.savvy
+++ b/site/getting-started.savvy
@@ -4,6 +4,12 @@
     <path fill="#6F6F6F" d="M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20L14 20ZM12 2C12.5523 2 13 2.44772 13 3L13 4.08298C15.8377 4.55905 18 7.02702 18 10L18 16L21 19L3 19L6 16L6 10C6 7.02698 8.1623 4.55902 11 4.08294L11 3C11 2.44772 11.4477 2 12 2Z"></path>
   </svg>
 }
+@previewOverlay(){
+  <svg style="width:24px;height:24px;">
+    <path fill="#000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path>
+    <path fill="#D74933" ng-attr-d="{{icon.data}}" d="M12 0C18.6274 0 24 5.37259 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37259 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47716 2 12C2 14.4013 2.84636 16.6049 4.25705 18.3287L18.3287 4.25706C16.6049 2.84637 14.4013 2 12 2ZM12 22C17.5228 22 22 17.5228 22 12C22 9.59873 21.1536 7.39514 19.7429 5.67127L5.67127 19.7429C7.39514 21.1536 9.59873 22 12 22Z"></path>
+  </svg>
+}
 
 # @title
 
@@ -29,6 +35,15 @@ The web font is not the only way to use the icons. They can also be included inl
 </svg>
 ```
 
+```html Overlay Example
+<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <path fill="#000000" d="M ... Z" />
+    <path fill="#990000" d="M ... Z" /> <!-- Overlay -->
+</svg>
+```
+
+@previewOverlay()
+
 ## WPF / Windows / Windows Phone
 
 Windows uses the vector XAML format. Right click any icon on the site and click the "View XAML" item in the context menu.