borderless buttons and icons

dist/ionic.css

@@ -134,7 +134,8 @@ main > * {
   .button.button-inline {
     display: inline-block; }
   .button.button-borderless {
-    border: none; }
+    border: none;
+    padding: 2px 6px; }
 
 .button-group {
   position: relative;
@@ -546,6 +547,12 @@ a.button {
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: black; }
 
+.button-transparent {
+  background: transparent; }
+
+.button-borderless [class^="icon-"], [class*=" icon-"] {
+  font-size: 2.3em; }
+
 .list-divider {
   background-color: whitesmoke;
   color: #222222;

example/panels.html

@@ -5,7 +5,7 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!--<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">-->
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../dist/ionic.css">
 
   </head>
@@ -14,9 +14,13 @@
     <section data-default-panel="my-left-panel">
 
       <header class="bar bar-header bar-dark">
-        <button class="button" data-panel-toggle="my-left-panel"></button>
+        <button class="button button-borderless button-transparent " data-panel-toggle="my-left-panel">
+          <i class="icon-reorder"></i>
+        </button>
         <h1 class="title">Panels</h1>
-        <button class="button" data-panel-toggle="my-right-panel" data-panel-direction="right"></button>
+        <button class="button button-borderless button-transparent " data-panel-toggle="my-right-panel" data-panel-direction="right">
+          <i class="icon-cog"></i>
+        </button>
       </header>
 
       <main class="content content-padded has-header">

scss/ionic/structure/_button.scss

@@ -12,5 +12,6 @@
 
 	&.button-borderless {
     border: none;
+    padding: 2px 6px;
   }
 }

scss/ionic/theme/_button.scss

@@ -34,3 +34,10 @@ a.button {
 .button-dark {
   @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
 }
+.button-transparent {
+  background: transparent;
+}
+
+.button-borderless [class^="icon-"], [class*=" icon-"] {
+  font-size: 2.3em;  
+}