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-

Ionic Icons

<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>

Try it »

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

Ionic icons list and class

For complete list of icons please refer – Ionic Icons List


Add Comment

📖 Read More