feat(dropdowns): use svg icon

Update that includes using svg icon for dropdown caret +
make sure that the documentation is updated and better looking

src/pivotal-ui/components/dropdowns/dropdowns.scss

@@ -21,11 +21,26 @@ Dropdowns are menus that can be triggered by buttons.
 
 This is the basic bootstrap dropdown.
 
+NOTE: Each of these are using the icon for the svg, which you can access with the
+icon helper:
+
+```html_example
+<svg style="display: none;">
+  <symbol id="i-arrow-down-selected" viewBox="0 0 56 28">
+    <path d="M56 1a1 1 0 0 0-1-1 .99.99 0 0 0-.69.282L54.306.28 28 25.61 1.693.28 1.69.282A.99.99 0 0 0 1 0a1 1 0 0 0-1 1c0 .283.12.536.31.718l-.003.003 27 26h.002a.99.99 0 0 0 1.38 0l.002.002 27-26-.002-.002A.994.994 0 0 0 56 1z"/>
+  </symbol>
+</svg>
+
+{{icon "@npm/glyphish/svg/g6/764-arrow-down-selected@2x" class="icon caret"}}
+
+```
+
 ```html_example
 <div class="dropdown">
-  <button id="dropdown-button-1" class="dropdown-toggle btn btn-default-alt" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button id="dropdown-button-1" class="dropdown-toggle btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Button Dropdown
-    <span class="caret"></span>
+    <svg class="icon caret"><use xlink:href="#i-arrow-down-selected"/></svg>
+
   </button>
   <ul class="dropdown-menu dropdown-border" role="menu" aria-labelledby="dropdown-button-1">
     <li role="presentation">
@@ -53,7 +68,8 @@ This is the basic bootstrap dropdown.
 <div class="dropdown">
   <button id="drop3" data-toggle="dropdown" class="dropdown-toggle btn btn-link" type="button">
     <span>Link Dropdown</span>
-    <span class="caret"></span>
+
+    <svg class="icon caret"><use xlink:href="#i-arrow-down-selected"/></svg>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
     <li role="presentation">
@@ -82,9 +98,9 @@ This is the basic bootstrap dropdown.
 
 ```html_example
 <div class="dropdown">
-  <button id="dropdown-button-1" class="dropdown-toggle btn btn-default-alt" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button id="dropdown-button-1" class="dropdown-toggle btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Button Dropdown
-    <span class="caret"></span>
+    <svg class="icon caret"><use xlink:href="#i-arrow-down-selected"/></svg>
   </button>
   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdown-button-1">
     <li role="presentation">
@@ -114,9 +130,9 @@ Here's a crazy-complex dropdown. Not for the faint of heart.
 
 ```html_example
 <div class="dropdown btn-group">
-  <button id="dropdown-button-2" class="dropdown-toggle btn btn-default-alt" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button id="dropdown-button-2" class="dropdown-toggle btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     dropdown trigger
-    <span class="caret"></span>
+    <svg class="icon caret"><use xlink:href="#i-arrow-down-selected"/></svg>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-button-2">
     <li role="presentation">
@@ -381,6 +397,18 @@ This is a notification dropdown with alerts.
   }
 }
 
+.dropdown-toggle {
+  .caret {
+    display: inline-block;
+    border: 0;
+    margin-right: -0.6em;
+    padding-top: 7px;
+    margin-left: 5px;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 20px;
+  }
+}
 
 .dropdown-notifications {
   .caret {
@@ -433,6 +461,7 @@ This is a notification dropdown with alerts.
       left: 0.75em;
       right: auto;
     }
+
   }
 
   .dropdown-menu {