Merge pull request #530 from google/add-button-snippets

Add snippets for Mini FABs and Icon buttons

docs/_pages/components.md

@@ -66,6 +66,20 @@ categories:
               file: flat-primary.html
             - caption: Accent colored flat
               file: flat-accent.html
+          - snippet_group:
+            - caption: Icon button
+              file: icon.html
+            - caption: Raised
+              file: icon-raised.html
+            - caption: Colored
+              file: icon-raised-colored.html
+          - snippet_group:
+            - caption: Mini FAB
+              file: fab-mini.html
+            - caption: Colored
+              file: fab-mini-colored.html
+            - caption: Accent colored
+              file: fab-mini-accent.html
   - name: cards
     title: Cards
     description: Self-contained pieces of paper with data.

src/button/snippets/fab-mini-accent.html

@@ -0,0 +1,4 @@
+<!-- Accent colored mini FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--accent">
+  <i class="material-icons">add</i>
+</button>

src/button/snippets/fab-mini-colored.html

@@ -0,0 +1,4 @@
+<!-- Colored mini FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+  <i class="material-icons">add</i>
+</button>

src/button/snippets/fab-mini.html

@@ -0,0 +1,4 @@
+<!-- Mini FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+  <i class="material-icons">add</i>
+</button>

src/button/snippets/icon-raised-colored.html

@@ -0,0 +1,4 @@
+<!-- Raised colored icon button -->
+<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised mdl-button--colored">
+  <i class="material-icons">mood</i>
+</button>

src/button/snippets/icon-raised.html

@@ -0,0 +1,4 @@
+<!-- Raised icon button -->
+<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised">
+  <i class="material-icons">mood</i>
+</button>

src/button/snippets/icon.html

@@ -0,0 +1,4 @@
+<!-- Icon button -->
+<button class="mdl-button mdl-js-button mdl-button--icon">
+  <i class="material-icons">mood</i>
+</button>