Skip to content

Commit

Permalink
fix(chip): align icon in the center
Browse files Browse the repository at this point in the history
fixes #5386
  • Loading branch information
nakulgulati authored and brandyscarney committed Jan 31, 2017
1 parent 47ed69e commit ace727e
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/components/chip/chip.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 10 additions & 0 deletions src/components/chip/test/basic/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit ace727e

Please sign in to comment.