How to resize custom icon with font-size?

ionic-v1
1

I am using a custom icon loaded from an image file(32x32), along with some standard ionic icons, and would like to style them together.

The ionic icons are 25px, white, surrounded by 32px background. However, I cannot use font-size, or color of the custom icon. Why?

I also tried 25x25 image file, but it is aligned with 32px background at top, i.e., off the center.

Therefore, If I use 32px image, it is bigger than ionic icon; if I use 25px image, it is off the center. How to fix it? Thank you.

HTML:

    <!-- Standard -->
    <ion-item class="item-icon-left">
      <i class="icon ion-clock"></i>
      <h2 class="menu-text">Clock</h2>
    </ion-item>

   <!-- Custom -->
    <ion-item class="item-icon-left" >
      <i class="icon icon-custom"></i>
      <h2 class="menu-text">Custom</h2>
    </ion-item>

SCSS:

.item-content
{
    .icon:before
   {
       background-color: #eeeeee;
       color: $FFFFFF;
       border-radius: 50%;
       font-size:25px;
       width: 32px;
       height: 32px;
       line-height: 32px;
   }

   .icon-custom:before {
        content: url('../img/custom.png') !important;
        font-size:25px;  
   }

}

2

You cannot set the color of an image.
Icons like Ionic and font awesome are actual text characters so can be colored that way

3

I see. How can I center the custom icon inside the background?