How to replace ion-email with custom icon?


#1

Hi,I’m a newbee with Ionic and my question may be stupid.However,hope somebody can help.

I want to replace the ion-email and badge in a list with custom icons

For example:

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon **ion-email**"></i>
    Check mail
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="**badge badge-assertive**">0</span>
  </a>
</div>

How can I achieve the effect?
Thx for help


#2

You can override the content (in your CSS file) with a URL to the image

.ion-email::before {       
    content: url('https://cdn1.iconfinder.com/data/icons/simple-icons/4096/email-4096-black.png');
}

or if you have the image stored locally you can put the path to it

.ion-email::before {
    content: url('../img/newEmailIcon.png');
}

The badge is a bit different. It uses CSS in order to look the way it does (a combination of padding, border-radius and background-color), so you would need to create a custom badge class using your icon. Here is a codepen where I threw together some css with a badge icon.


#3

Thank you for your help sooooo much!
I have tried it and the effect is perfect! It is exactly what I want .
:blush:Thx again~


#5

How can I resize it? My SVG is showing too big.