Add icon-inline component, update render-heading.html.example and add render-image.html.example.

assets/sass/_zen.scss

@@ -292,31 +292,3 @@ figure {
     }
   }
 }
-
-// Icons.
-
-.icon {
-  // Reset set SVG to block but icons are normally inline.
-  display: inline;
-}
-
-// Header anchor links
-
-.anchor-link {
-  opacity: 0;
-  transition: all 130ms ease-in;
-}
-
-.anchor-header {
-  &:focus,
-  &:hover {
-    .anchor-link {
-      opacity: .3;
-
-      &:focus,
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}

assets/sass/components/icon-inline/_icon-inline.scss

@@ -0,0 +1,27 @@
+// Inline icons.
+
+.icon-inline,
+%icon-inline {
+  .icon-link {
+    opacity: 0;
+    transition: all 130ms ease-in;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &:hover {
+    .icon-link {
+      opacity: .3;
+
+      &:focus,
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  svg {
+    display: inline;
+    vertical-align: middle;
+  }
+}

assets/sass/styles.scss

@@ -40,6 +40,7 @@
 @import 'components/header/header';
 @import 'components/hidden/hidden';
 @import 'components/highlight-mark/highlight-mark';
+@import 'components/icon-inline/icon-inline';
 @import 'components/language-selector/language-selector';
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';