Ionic Icons

Ionic Icons : Icons has rich icons which are free to use and open source. You can simple create icons in ionic by just adding the class .icon and it’s icon ionicon class name for the icons which you want to create for example home icon – class=”icon ion-home” is used. Feel free to use icons as you want in your application. You can also add icons in buttons. Here we are going to explain the icons utility with example and demo.

Ionic Icons List

Let us create some most common used icons in ionic-

• Home Icon –

  Add class – ion-home

• Settings Icon –

  Add class – ion-settings

• Delete Icon –

  Add class – ion-trash-a

• User Icon –

  Add class – ion-person

• Chat Icon –

  Add class – ion-chatbubble-working

• Battery Icon

  Add class – ion-battery-half

• Bluetooh Icon

  Add class – ion-bluetooth

• Image Icon

  Add class – ion-image

• Wi-Fi Icon

  Add class – ion-wifi

• Volume Icon

  Add class – ion-volume-high

• Volume Mute

  Add class – ion-volume-mute

Here an example of both text and background color-

<ul class="list">
<li class="item"> <i class="icon ion-home"></i></li>
<li class="item"> <i class="icon ion-settings"></i></li>
<li class="item"> <i class="icon ion-trash-a"></i></li>
<li class="item"> <i class="icon ion-person"></i></li>
<li class="item"> <i class="icon ion-chatbubble-working"></i></li>
<li class="item"> <i class="icon ion-battery-half"></i></li>
<li class="item"> <i class="icon ion-bluetooth"></i></li>
<li class="item"> <i class="icon ion-wifi"></i></li>
<li class="item"> <i class="icon ion-volume-high"></i></li>
<li class="item"> <i class="icon ion-volume-mute"></i></li>

If you run the above example it will produce the following output-

For complete list of icons please refer – Ionic Icons List

Add Comment

📖 Read More

• 1. Ionic Action Sheet
• 2. Ionic Backdrop
• 3. Ionic js Content
• 4. Ionic Ion-refresher
• 5. Ionic Events

• 6. Ionic Keyboard
• 7. Ionic loading
• 8. Ionic Modal
• 9. Ionic Navigation
• 10. Ionic Popover