fix(chip): align icon in the center

fixes #5386
ionic-team · Jan 31, 2017 · ace727e · ace727e
1 parent 47ed69e
commit ace727e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
@@ -15,6 +15,9 @@ $chip-button-size:              32px !default;
 /// @prop - Border radius of the icon in the chip
 $chip-icon-border-radius:     50% !default;
 
+/// @prop - Text alignment of the icon in the chip
+$chip-icon-text-align:        center !default;
+
 /// @prop - Width and height of the icon in the chip
 $chip-icon-size:              32px !default;
 
@@ -56,6 +59,7 @@ ion-chip ion-icon {
 
   font-size: $chip-icon-font-size;
   line-height: $chip-icon-size;
+  text-align: $chip-icon-text-align;
 }
 
 ion-chip ion-avatar {

diff --git a/src/components/chip/test/basic/main.html b/src/components/chip/test/basic/main.html
@@ -93,4 +93,14 @@ <h2>Delete Chips</h2>
     </button>
   </ion-chip>
 
+  <ion-item>
+    <ion-label>Chip Item</ion-label>
+    <ion-chip item-right #chip1>
+      <ion-icon name="pin" color="primary"></ion-icon>
+      <ion-label>Default</ion-label>
+      <button ion-button clear color="light" (click)="delete(chip1)">
+        <ion-icon name="close-circle"></ion-icon>
+      </button>
+    </ion-chip>
+  </ion-item>
 </ion-content>