How to declare new icons in ionic 4 beta?
In Ionic 3, I did it like this. (in apps.scss)
ion-icon {
&[class*=“custom-”] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 20px;
height: 20px;
}
&[class*="custom-activity"] {
mask-image: url(../assets/customIcons/activity.svg);
}
&[class*="custom-addphoto"] {
mask-image: url(../assets/customIcons/addphoto.svg);
}Just supply the SVG to the src property:
<ion-icon src="/path/to/icon.svg"><ion-icon>
Thank you.
<ion-tabs>
<ion-tab label="Deal" icon="star" href="/tabs/(deal:deal)">
<ion-router-outlet name="deal"></ion-router-outlet>
</ion-tab>
</ion-tabs>
how i use this for tabs?
Have you found a solution for using custom icons in the tabs? I’m interested in this too. Can’t seem to find a solution anywhere
Try:
<ion-tabs>
...
<!--
<ion-tab label="Files" icon="document" href="/tabs/(files:files)">
<ion-router-outlet name="files"></ion-router-outlet>
</ion-tab>
-->
<ion-tab label="Files" icon="assets/images/icons/compress-solid.svg" href="/tabs/(files:files)">
<ion-router-outlet name="files"></ion-router-outlet>
</ion-tab>
...
</ion-tabs>
See:
Thank you that worked. Just two more questions:
Is there a way to modify font-size of icon within the tab?
And is there a way to use a different .svg on click of the tab icon button? When tab icon button active, replace current svg with another svg basically.
Thank you 