Replace ion-icon with svg instead of font

#1

Hello everyone, we are using some ionic icons and for those icons we have our own svg files.

Those icons are to big tho. How can we resize it?

That is a sample code:

<button clear item-right>
    <ion-icon name="search"></ion-icon>
</button>

.ion-md-search {
    content: url("../../img/Icon_Search.svg")
}

This works, but the icon then is too big.

I also tried using background but then it gets mixed with the original content.

#2

With css I guess :wink:, customization by overriding or making your own perperty/class based selectors seems to be the way to go

<ion-icon name="search" svgversion></ion-icon>

in your .scss file

ion-ion[name="serch"][svgversion] {
  // customize
}

ionic’s icon styling doesn’t look too opinionated