update(chips): cleans up chips demo

src/components/chips/demoBasicUsage/index.html

@@ -37,13 +37,20 @@
         Display an ordered set of objects as chips (with custom template).
     </p>
 
-    <md-chips ng-model="ctrl.vegObjs"
-              readonly="ctrl.readonly"
-              md-on-append="ctrl.newVeg($chip)">
+    <md-chips
+        class="custom-chips"
+        ng-model="ctrl.vegObjs"
+        readonly="ctrl.readonly"
+        md-on-append="ctrl.newVeg($chip)">
         <md-chip-template>
-          <span>{{$chip.name}}:{{$chip.type}}</span>
+          <span>
+            <strong>{{$chip.name}}</strong>
+            <em>({{$chip.type}})</em>
+          </span>
         </md-chip-template>
-        <md-button md-chip-remove  class="md-primary vegetablechip">del</md-button>
+        <button md-chip-remove class="md-primary vegetablechip">
+          <md-icon md-svg-icon="close"></md-icon>
+        </button>
     </md-chips>
 
     <br/>

src/components/chips/demoBasicUsage/style.scss

@@ -0,0 +1,36 @@
+.custom-chips {
+  .md-chip {
+    position: relative;
+    padding-right: 3.5rem;
+    .md-chip-remove-container {
+      position: absolute;
+      right: 0.4rem;
+      top: 0.4rem;
+      button.vegetablechip {
+        position: relative;
+        height: 2.4rem;
+        width: 2.4rem;
+        line-height: 3.0rem;
+        text-align: center;
+        background: rgba(black, 0.3);
+        border-radius: 50%;
+        border: none;
+        box-shadow: none;
+        padding: 0;
+        margin: 0;
+        transition: background 0.15s linear;
+        md-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate3d(-50%, -50%, 0) scale(0.7);
+          color: white;
+          fill: white;
+        }
+        &:hover, &:focus {
+          background: rgba(red, 0.8);
+        }
+      }
+    }
+  }
+}