Ionic Chip

Ionic chip displays the complex entities in small entities in small blocks, such as the contacts. Ionic chip has several types of elements like avatars, thumbnails, text, and icons. It is a bubble-like container that holds the text and icons.

Example: This example explains how you can use the ionic chip in the ionic application.

Home.page.html

<ion-header>  
 <ion-toolbar color="primary">  
     <ion-title>Ionic Chip Example</ion-title>  
   </ion-toolbar>  
 </ion-header>  
 <ion-content class="ion-padding" color="light">   
   <h1>Ionic Chip</h1>  
   <ion-chip>  
     <ion-label>Default Chip</ion-label>  
   </ion-chip>  
 </ion-content>   

Output: After executing this code, you will get the output, shown below:

Adding Avatar and Icons

The Ionic application permits you to add the avatar and icons in the chip component. To add the icons and avatar in the <ion-chip> component, you are required to insert <ion-icon> and <ion-avatar> component inside the <ion-chip> component.

Example: This example explains how you can add the icons and avatars in the ionic chip component. 

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Chip</ion-title>  
   </ion-toolbar>  
 </ion-header>  
 <ion-content class="ion-padding" color="light">   
   <h1>Avatars and Icons</h1>  
   <ion-chip>  
     <ion-icon name="settings"></ion-icon>  
     <ion-label>Default Chip</ion-label>
     <ion-icon name="close-circle"></ion-icon>   
   </ion-chip>  
   <ion-chip>  
     <ion-icon name="share" color="primary"></ion-icon>  
     <ion-label>Icon Chip</ion-label>  
     <ion-icon name="close-circle"></ion-icon>   
   </ion-chip> 
   <ion-chip>  
     <ion-icon name="add" color="danger"></ion-icon>
     <ion-label>Button Chip</ion-label>  
     <ion-icon name="close"></ion-icon>  
   </ion-chip>   
   <ion-chip>  
     <ion-avatar>  
       <img src="assets\icon\avatar.png">  
     </ion-avatar>  
     <ion-label>Avatar Chip</ion-label>  
     <ion-icon name="close"></ion-icon>  
   </ion-chip>  
 </ion-content>   

Output: After executing this code, you will get the output, as shown below:

Outline Chip

By default, the shape of the ionic is solid. However, it can be changed using the outline property. You can set the outline chip by using the <ion-chip> component.

Example: This example explains how you can use the outline chip in the ionic application.

Home.page.html

<ion-header>  
 <ion-toolbar color="primary">  
     <ion-title>Ionic Chip Example</ion-title>  
   </ion-toolbar>  
 </ion-header>   
 <ion-content class="ion-padding" color="light">  
   <h1>Ionic Chip</h1>  
   <ion-chip>   
     <ion-label>Default Chip</ion-label>  
   </ion-chip>
   <ion-chip outline>Outline Chip</ion-chip>
 </ion-content>   

Output: After executing this code, you will get the output, as shown below:

Chip Styling

It is used to colorize the chip component in the different styles. By using the color attribute, you can change the styling of the ionic chip.

Example: This example explains how you can use the color attribute inside the chip component.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Chip Example</ion-title>  
   </ion-toolbar>  
 </ion-header>   
 <ion-content class="ion-padding" color="light">  
   <h1>Avatars and Icons</h1>  
   <ion-chip color="danger">  
     <ion-icon name="settings"></ion-icon>  
     <ion-label>Default Chip</ion-label>
     <ion-icon name="close-circle"></ion-icon>   
   </ion-chip>  
   <ion-chip color="warning">  
     <ion-icon name="share" color="primary"></ion-icon>  
     <ion-label>Icon Chip</ion-label>  
     <ion-icon name="close-circle"></ion-icon>  
   </ion-chip> 
   <ion-chip color="primary">
     <ion-icon name="add" color="danger"></ion-icon>
     <ion-label>Button Chip</ion-label>   
     <ion-icon name="close"></ion-icon>  
   </ion-chip>  
   <ion-chip color="success">  
     <ion-avatar>   
       <img src="assets\icon\avatar.png">  
     </ion-avatar>  
     <ion-label>Avatar Chip</ion-label>  
     <ion-icon name="close"></ion-icon>  
   </ion-chip>  
 </ion-content>   

Output: After executing this code, you will get the output, as shown below: