Ionic V4 Icons

Ionic Framework
1

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);
}
2

Just supply the SVG to the src property:

<ion-icon src="/path/to/icon.svg"><ion-icon>
1 Like
3

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?

4

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

5

@Pancha27
@cvhashim

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>

54

53

See:

1 Like
6

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.

@robinyo

7

Thank you :slight_smile: