Custom icons help!


#1

I wanna be able to use my custom icons in builtin ionic components, let’s say ion-tabs for example, I wanna be able to put my own icons as the tab icons? How can I achieve this, I tried many solutions like iconmoon etc, but to no prevail, is there anyone who can guide me. Please keep it basic and step by step.


#2

We have trouble with this ourselves when we started working with ionic. They have a great sample set but eventually we wanted to customize.

Here is a code-snippet of how to do it. I strongly advise you separate the CSS into it’s own style sheet. This is just proof-of-concept to help you move forward.

<a class="tab-item" 
     href="#" 
     style= "display: flex;
             flex-direction: column;
             justify-content: center;">

    <span  style="background-image: url('http://image005.flaticon.com/1/svg/108/108884.svg');
                          height: 30px;
                          width: 30px;
                         margin: 0 auto;">
    </span>

    <span>Home</span>       
</a>

I’ve attached a quick screenshot example of it in effect!


#3

So basically there is no way to create my own icon pack ? Which I can use directly.
Thanks