diff --git a/src/components/chips/demoBasicUsage/style.scss b/src/components/chips/demoBasicUsage/style.scss
index 12bd7700026..baa80c60b44 100644
--- a/src/components/chips/demoBasicUsage/style.scss
+++ b/src/components/chips/demoBasicUsage/style.scss
@@ -1,7 +1,6 @@
 .custom-chips {
   .md-chip {
     position: relative;
-    padding-right: 35px;
     .md-chip-remove-container {
       position: absolute;
       right: 4px;
@@ -35,5 +34,10 @@
         }
       }
     }
+    &:not(.md-readonly) {
+      md-chip-template {
+        padding-right: 20px;
+      }
+    }
   }
 }
diff --git a/src/components/chips/js/chipsDirective.js b/src/components/chips/js/chipsDirective.js
index d1acf95082d..19e6a2d00af 100644
--- a/src/components/chips/js/chipsDirective.js
+++ b/src/components/chips/js/chipsDirective.js
@@ -96,14 +96,15 @@
           class="md-chips">\
         <md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
             index="{{$index}}"\
-            ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index}">\
+            ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': $mdChipsCtrl.readonly}">\
           <div class="md-chip-content"\
               tabindex="-1"\
               aria-hidden="true"\
               ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
               md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
-          <div class="md-chip-remove-container"\
-              md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
+          <div ng-if="!$mdChipsCtrl.readonly"\
+               class="md-chip-remove-container"\
+               md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
         </md-chip>\
         <div ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl"\
             class="md-chip-input-container"\