diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 2d6f31de35..311bb6d7b8 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -1188,6 +1188,18 @@ a.list-item {
     border-radius: 0;
     border: none; }
 
+/**
+ * Right-side icon that reused by components like radio buttons
+ */
+.list-item-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  padding: 13px;
+  height: 100%;
+  font-size: 24px; }
+
 /**
  * A list divider.
  */
@@ -1523,28 +1535,23 @@ input[type="checkbox"][readonly] {
     -webkit-transform: none;
     transition-delay: 0.05s, 0s; }
 
-.radio-buttton-list .list-item-buttons {
+.radio-buttton-list .list-item-content {
+  /* give some room to the right for the checkmark icon */
+  padding-right: 60px; }
+
+.radio-buttton-list .list-item-icon {
+  /* checkmark icon will be hidden by default */
   visibility: hidden; }
-.radio-buttton-list [class^="icon-"],
-.radio-buttton-list [class*=" icon-"] {
-  position: absolute;
-  top: 25%;
-  left: 25%;
-  font-size: 24px; }
+
 .radio-buttton-list input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none; }
   .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
-    /* style the list item when its checked */
+    /* style the list item content when its checked */
     background: #f7f7f7; }
-  .radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
-    /* show the icon when its checked */
+  .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
+    /* show the checkmark icon when its checked */
     visibility: visible; }
-.radio-buttton-list .list-item-content {
-  padding-right: 60px; }
-.radio-buttton-list .list-item-buttons {
-  z-index: 3;
-  width: 45px; }
 
 .button {
   position: relative;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index af6071d517..284f96aba8 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -168,6 +168,9 @@
    * The hidden right-side buttons that can be exposed under a list item
    * with dragging.
    */
+  /**
+   * Right-side icon that reused by components like radio buttons
+   */
   /**
    * A list divider.
    */
@@ -175,7 +178,7 @@
    * List refreser elements
    */
   /* the overall container of the toggle */
-  /* hide the actual checkbox */
+  /* hide the actual <input type="checkbox"> */
   /* the background of the toggle's track area */
   /* also the track appearance when the toggle is "off" */
   /* the handle (circle) thats inside the toggle's track area */
@@ -1864,6 +1867,14 @@
       height: 100%;
       border-radius: 0;
       border: none; }
+  .ionic .list-item-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 3;
+    padding: 13px;
+    height: 100%;
+    font-size: 24px; }
   .ionic .list-divider {
     padding: 5px 15px;
     background-color: whitesmoke;
@@ -2143,7 +2154,7 @@
         opacity: 1; }
   .ionic .toggle {
     display: inline-block; }
-  .ionic .toggle input {
+  .ionic .toggle input[type="checkbox"] {
     display: none; }
   .ionic .toggle .track {
     display: inline-block;
@@ -2154,9 +2165,9 @@
     border-radius: 20px;
     background-color: #e5e5e5;
     cursor: pointer;
-    transition-property: background-color, border;
+    transition-timing-function: ease-in-out;
     transition-duration: 0.1s;
-    transition-timing-function: ease-in-out; }
+    transition-property: background-color, border; }
   .ionic .toggle .handle {
     position: absolute;
     display: block;
@@ -2168,11 +2179,11 @@
     /* used to create a larger hit area to slide the handle */ }
     .ionic .toggle .handle:before {
       position: absolute;
-      content: " ";
+      top: -2px;
+      left: -16px;
       display: table;
-      left: -14px;
-      top: -11px;
-      padding: 14px 30px; }
+      padding: 17px 30px;
+      content: " "; }
   .ionic .toggle :checked + .track {
     /* the track when the toggle is "on" */
     border-color: #5f85ef;
@@ -2181,28 +2192,21 @@
     .ionic .toggle :checked + .track .handle {
       background-color: white;
       -webkit-transform: translate3d(22px, 0, 0); }
-  .ionic .radio-buttton-list .list-item-buttons {
+  .ionic .radio-buttton-list .list-item-content {
+    /* give some room to the right for the checkmark icon */
+    padding-right: 60px; }
+  .ionic .radio-buttton-list .list-item-icon {
+    /* checkmark icon will be hidden by default */
     visibility: hidden; }
-  .ionic .radio-buttton-list [class^="icon-"],
-  .ionic .radio-buttton-list [class*=" icon-"] {
-    position: absolute;
-    top: 25%;
-    left: 25%;
-    font-size: 24px; }
   .ionic .radio-buttton-list input[type="radio"] {
     /* hide any radio button inputs elements (the ugly circles) */
     display: none; }
     .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
-      /* style the list item when its checked */
+      /* style the list item content when its checked */
       background: #f7f7f7; }
-    .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
-      /* show the icon when its checked */
+    .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
+      /* show the checkmark icon when its checked */
       visibility: visible; }
-  .ionic .radio-buttton-list .list-item-content {
-    padding-right: 60px; }
-  .ionic .radio-buttton-list .list-item-buttons {
-    z-index: 3;
-    width: 45px; }
   .ionic .button {
     position: relative;
     display: inline-block;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 572491ff0b..1c22e770ad 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2297,6 +2297,18 @@ a.list-item {
     border-radius: 0;
     border: none; }
 
+/**
+ * Right-side icon that reused by components like radio buttons
+ */
+.list-item-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  padding: 13px;
+  height: 100%;
+  font-size: 24px; }
+
 /**
  * A list divider.
  */
@@ -2615,8 +2627,8 @@ input[type="checkbox"][readonly] {
 .toggle {
   display: inline-block; }
 
-/* hide the actual checkbox */
-.toggle input {
+/* hide the actual <input type="checkbox"> */
+.toggle input[type="checkbox"] {
   display: none; }
 
 /* the background of the toggle's track area */
@@ -2630,9 +2642,9 @@ input[type="checkbox"][readonly] {
   border-radius: 20px;
   background-color: #e5e5e5;
   cursor: pointer;
-  transition-property: background-color, border;
+  transition-timing-function: ease-in-out;
   transition-duration: 0.1s;
-  transition-timing-function: ease-in-out; }
+  transition-property: background-color, border; }
 
 /* the handle (circle) thats inside the toggle's track area */
 /* also the appearance when the handle is "off" */
@@ -2647,11 +2659,11 @@ input[type="checkbox"][readonly] {
   /* used to create a larger hit area to slide the handle */ }
   .toggle .handle:before {
     position: absolute;
-    content: " ";
+    top: -2px;
+    left: -16px;
     display: table;
-    left: -14px;
-    top: -11px;
-    padding: 14px 30px; }
+    padding: 17px 30px;
+    content: " "; }
 
 /* When the toggle is "on" */
 .toggle :checked + .track {
@@ -2663,28 +2675,23 @@ input[type="checkbox"][readonly] {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
 
-.radio-buttton-list .list-item-buttons {
+.radio-buttton-list .list-item-content {
+  /* give some room to the right for the checkmark icon */
+  padding-right: 60px; }
+
+.radio-buttton-list .list-item-icon {
+  /* checkmark icon will be hidden by default */
   visibility: hidden; }
-.radio-buttton-list [class^="icon-"],
-.radio-buttton-list [class*=" icon-"] {
-  position: absolute;
-  top: 25%;
-  left: 25%;
-  font-size: 24px; }
+
 .radio-buttton-list input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none; }
   .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
-    /* style the list item when its checked */
+    /* style the list item content when its checked */
     background: #f7f7f7; }
-  .radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
-    /* show the icon when its checked */
+  .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
+    /* show the checkmark icon when its checked */
     visibility: visible; }
-.radio-buttton-list .list-item-content {
-  padding-right: 60px; }
-.radio-buttton-list .list-item-buttons {
-  z-index: 3;
-  width: 45px; }
 
 .button {
   position: relative;
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index 07bdc95121..ee7e26954e 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -233,6 +233,19 @@ a.list-item {
   }
 }
 
+/**
+ * Right-side icon that reused by components like radio buttons
+ */
+.list-item-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  padding: $list-item-padding - 2;
+  height: 100%;
+  font-size: 24px;
+}
+
 
 /**
  * A list divider.
diff --git a/scss/ionic/_radio.scss b/scss/ionic/_radio.scss
index 7c74960e19..8f4479af8a 100644
--- a/scss/ionic/_radio.scss
+++ b/scss/ionic/_radio.scss
@@ -2,42 +2,27 @@
 // Radio Buttons
 // -------------------------------
 
-.radio-buttton-list {
-
-  .list-item-buttons {
-    visibility: hidden;
-  }
-
-  [class^="icon-"],
-  [class*=" icon-"] {
-    position: absolute;
-    top: 25%;
-    left: 25%;
-    font-size: 24px;
-  }
-
-  input[type="radio"] {
-    /* hide any radio button inputs elements (the ugly circles) */
-    display: none;
-
-    &:checked ~ .list-item-content {
-      /* style the list item when its checked */
-      background: #f7f7f7;
-    }
-
-    &:checked ~ .list-item-buttons {
-      /* show the icon when its checked */
-      visibility: visible;
-    }
-  }
-
-  .list-item-content {
-    padding-right: $list-item-padding * 4;
-  }
-
-  .list-item-buttons {
-    z-index: 3;
-    width: $list-item-padding * 3;
-  }
-
+.radio-buttton-list .list-item-content {
+  /* give some room to the right for the checkmark icon */
+  padding-right: $list-item-padding * 4;
 }
+
+.radio-buttton-list .list-item-icon {
+  /* checkmark icon will be hidden by default */
+  visibility: hidden;
+}
+
+.radio-buttton-list input[type="radio"] {
+  /* hide any radio button inputs elements (the ugly circles) */
+  display: none;
+
+  &:checked ~ .list-item-content {
+    /* style the list item content when its checked */
+    background: #f7f7f7;
+  }
+
+  &:checked ~ .list-item-icon {
+    /* show the checkmark icon when its checked */
+    visibility: visible;
+  }
+}
\ No newline at end of file
diff --git a/test/input-radio.html b/test/input-radio.html
index 27cc9f4be0..80a9cd65d1 100644
--- a/test/input-radio.html
+++ b/test/input-radio.html
@@ -28,9 +28,7 @@
             <div class="list-item-content">
               Go
             </div>
-            <div class="list-item-buttons">
-              <i class="icon-checkmark"></i>
-            </div>
+            <div class="list-item-icon icon-checkmark"></div>
           </label>
 
           <label class="list-item">
@@ -38,9 +36,7 @@
             <div class="list-item-content">
               Python
             </div>
-            <div class="list-item-buttons">
-              <i class="icon-checkmark"></i>
-            </div>
+            <div class="list-item-icon icon-checkmark"></div>
           </label>
 
         </div>