update code examples and add more icons

4 files changed, 53 insertions, 22 deletions

diff --git a/demo/index.html b/demo/index.html
index 878c951..8e501af 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -200,18 +200,17 @@
             <div class="columns">
                 <div class="column">
                     <button class="btn btn-sm">small button</button>
+                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
                     <button class="btn">normal button</button>
+                    <button class="btn"><span class="icon icon-markunread"></span> normal button</button>
                     <button class="btn btn-lg">large button</button>
+                    <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
                 </div>
-                <div class="column">
-                    <button class="btn btn-block">block button</button>
-                </div>
+
             </div>
             <div class="columns">
                 <div class="column">
-                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
-                    <button class="btn"><span class="icon icon-markunread"></span> normal button</button>
-                    <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
+                    <button class="btn btn-block">block button</button>
                 </div>
             </div>
         </section>
@@ -436,6 +435,7 @@
             <div class="columns">
                 <div class="column">
                     <div class="chip">
+                        <span class="icon icon-favorite_border"></span>
                         <span class="chip-name">Crime</span>
                         <button class="btn btn-clear"></button>
                     </div>
@@ -553,13 +553,13 @@
                 <div class="column">
                     <div class="toast">
                         <button class="btn-clear pull-right"></button>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-primary">
                         <button class="btn-clear pull-right"></button>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
             </div>
@@ -636,6 +636,28 @@
                         </li>
                     </ul>
                 </div>
+                <div class="column col-3">
+                    <ul class="menu">
+                        <li class="menu-header">
+                            <span class="menu-header-text">
+                                Go to
+                            </span>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                <span class="icon icon-link"></span> Slack
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                <span class="icon icon-link"></span> Hipchat
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            <span class="icon icon-link"></span> Skype
+                        </li>
+                    </ul>
+                </div>
             </div>
         </section>
 
diff --git a/dist/spectre.css b/dist/spectre.css
index 3e5d022..da78888 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -398,6 +398,15 @@ a:hover,
 a:focus {
   color: #283176;
 }
+.btn .icon,
+button .icon,
+.toast .icon,
+.menu .icon {
+  margin-right: .2rem;
+  font-size: 1.3333em;
+  line-height: 0.8em;
+  vertical-align: -20%;
+}
 h1,
 h2,
 h3,
@@ -739,13 +748,6 @@ button.btn-link:active,
 button.btn-link.active {
   color: #283176;
 }
-.btn .icon,
-button .icon {
-  margin-right: .2rem;
-  font-size: 1.3333em;
-  line-height: 0.8em;
-  vertical-align: -20%;
-}
 .btn.btn-sm,
 button.btn-sm {
   height: 2.4rem;
diff --git a/src/base.less b/src/base.less
index 3eda371..8090c55 100644
--- a/src/base.less
+++ b/src/base.less
@@ -25,3 +25,17 @@ a {
     color: darken(@core-link-color, 25%);
   }
 }
+
+
+// Icons
+.btn,
+button,
+.toast,
+.menu {
+  .icon {
+    margin-right: .2rem;
+    font-size: 1.3333em;
+    line-height: 0.8em;
+    vertical-align: -20%;
+  }
+}
\ No newline at end of file
diff --git a/src/buttons.less b/src/buttons.less
index be6f1ce..ef95627 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -101,13 +101,6 @@ button {
       color: darken(@core-color, 25%);
     }
   }
-  // Buttons with icons
-  .icon {
-    margin-right: .2rem;
-    font-size: 1.3333em;
-    line-height: 0.8em;
-    vertical-align: -20%;
-  }
 
   // Button Small
   &.btn-sm {