diff --git a/build/scss/_dropdown.scss b/build/scss/_dropdown.scss
index e3c65a188..537d034db 100644
--- a/build/scss/_dropdown.scss
+++ b/build/scss/_dropdown.scss
@@ -17,6 +17,12 @@
   margin: 0;
 }
 
+.dropdown-icon {
+  &::after {
+    margin-left: 0;
+  }
+}
+
 // Dropdown Sizes
 .dropdown-menu-lg {
   max-width: 300px;
diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html
index f4fdb103c..6491a0c8d 100644
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -1227,8 +1227,7 @@
                         <button type="button" class="btn btn-default">2</button>
 
                         <div class="btn-group">
-                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
+                          <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
                           </button>
                           <div class="dropdown-menu">
                             <a class="dropdown-item" href="#">Dropdown link</a>
@@ -1268,8 +1267,7 @@
                         <button type="button" class="btn btn-info">2</button>
 
                         <div class="btn-group">
-                          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
+                          <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                           </button>
                           <div class="dropdown-menu">
                             <a class="dropdown-item" href="#">Dropdown link</a>
@@ -1310,8 +1308,7 @@
                         <button type="button" class="btn btn-danger">2</button>
 
                         <div class="btn-group">
-                          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
+                          <button type="button" class="btn btn-danger dropdown-toggle dropdown-icon" data-toggle="dropdown">
                           </button>
                           <div class="dropdown-menu">
                             <a class="dropdown-item" href="#">Dropdown link</a>
@@ -1353,8 +1350,7 @@
                         <button type="button" class="btn btn-warning">2</button>
 
                         <div class="btn-group">
-                          <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
+                          <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
                           </button>
                           <div class="dropdown-menu">
                             <a class="dropdown-item" href="#">Dropdown link</a>
@@ -1396,8 +1392,7 @@
                         <button type="button" class="btn btn-success">2</button>
 
                         <div class="btn-group">
-                          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
+                          <button type="button" class="btn btn-success dropdown-toggle dropdown-icon" data-toggle="dropdown">
                           </button>
                           <div class="dropdown-menu">
                             <a class="dropdown-item" href="#">Dropdown link</a>
@@ -1469,8 +1464,7 @@
                 <div class="margin">
                   <div class="btn-group">
                     <button type="button" class="btn btn-default">Action</button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1483,8 +1477,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-info">Action</button>
-                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1497,8 +1490,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-danger">Action</button>
-                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-danger dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1512,7 +1504,6 @@
                   <div class="btn-group">
                     <button type="button" class="btn btn-success">Action</button>
                     <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1525,8 +1516,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-warning">Action</button>
-                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1545,8 +1535,7 @@
                 <div class="margin">
                   <div class="btn-group">
                     <button type="button" class="btn btn-default btn-flat">Action</button>
-                    <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-default btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1559,8 +1548,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-info btn-flat">Action</button>
-                    <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-info btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1573,8 +1561,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-danger btn-flat">Action</button>
-                    <button type="button" class="btn btn-danger btn-flat dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-danger btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1587,8 +1574,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-success btn-flat">Action</button>
-                    <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-success btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1601,8 +1587,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-warning btn-flat">Action</button>
-                    <button type="button" class="btn btn-warning btn-flat dropdown-toggle" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-warning btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1620,8 +1605,7 @@
                 <div class="margin">
                   <div class="btn-group">
                     <button type="button" class="btn btn-default">Action</button>
-                    <button type="button" class="btn btn-default dropdown-toggle dropdown-hover" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-default dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1634,8 +1618,7 @@
                     </button>
                   <div class="btn-group">
                     <button type="button" class="btn btn-info">Action</button>
-                    <button type="button" class="btn btn-info dropdown-toggle dropdown-hover" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-info dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1648,8 +1631,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-danger">Action</button>
-                    <button type="button" class="btn btn-danger dropdown-toggle dropdown-hover" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-danger dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1662,8 +1644,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-success">Action</button>
-                    <button type="button" class="btn btn-success dropdown-toggle dropdown-hover" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-success dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1676,8 +1657,7 @@
                   </div>
                   <div class="btn-group">
                     <button type="button" class="btn btn-warning">Action</button>
-                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-hover" data-toggle="dropdown">
-                      <span class="caret"></span>
+                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
                       <span class="sr-only">Toggle Dropdown</span>
                       <div class="dropdown-menu" role="menu">
                         <a class="dropdown-item" href="#">Action</a>
@@ -1797,7 +1777,6 @@
 
                         <div class="btn-group">
                           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -1838,7 +1817,6 @@
 
                         <div class="btn-group">
                           <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -1880,7 +1858,6 @@
 
                         <div class="btn-group">
                           <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -1923,7 +1900,6 @@
 
                         <div class="btn-group">
                           <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="#">Dropdown link</a></li>
@@ -1966,7 +1942,6 @@
 
                         <div class="btn-group">
                           <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
-                            <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="#">Dropdown link</a></li>