How to replace ion-email with custom icon?


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 class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    <span class="**badge badge-assertive**">0</span>

How can I achieve the effect?
Thx for help


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

.ion-email::before {       
    content: url('');

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.


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~


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