Ionic2 <ion-tab> add custom image in tab-icon

Ionic Native
1

hi folks,
can any one please help me to find solution in ionic2, how do I add custom .png file in tab-icon?

2

<img src="assets/img/something.png">

3

Putting image tag betwen didn’t worked.

<ion-tab [root]=“tab5Root” tabTitle=“My Account” tabIcon=“iconRight”>

4

Bump. Would like to know how to do this as well

5

[Ionic Tutorial] Tabs with custom active/inactive Icons This post had the answer I needed

6

Just leaving a simple way I have tried that works.
This can be done in 4 simple steps:

STEPS

  1. have ready the icon as an SVG image.
    Get the icon in SVG format (from Font Awesome or any similar site)
  2. save SVG file to folder: src/assets
  3. add css class to app.scss
/*custom Ionicon icon*/
ion-icon {
  &[class*="custom-"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
  }
  &[class*="custom-mynewicon"] {
    mask-image: url(../assets/mynewicon.svg);
  }
  1. use new icon name in html
<ion-icon name="custom-mynewicon"></ion-icon>

Credit goes to Ralphs Blog:
https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html

2 Likes
7

I did it in Ionic 3 and code is as follow.

SCSS file

ion-icon {
    &[class*="custom-"] {
        margin: 0 5px 0 0;
        vertical-align: middle;
        $sz: 20px;
        width: $sz;
        height: $sz;
    } // custom icons
    &[class*="chat"][ng-reflect-is-active="true"] {
        background: url("../assets/imgs/pin_on.png") no-repeat 50% 50%;
        background-size: contain;
    }//in case of active
    &[class*="chat"][ng-reflect-is-active="false"] {
        background: url("../assets/imgs/pin_off.png") no-repeat 50% 50%;
        background-size: contain;
    }//in case of inactive
    &[class*="group"] {
        background: url("../assets/imgs/group.png") no-repeat 50% 50%;
        background-size: contain;
    }
}

HTML

<ion-tab [root]="home" tabTitle="Home" tabIcon="custom-chat"></ion-tab>

tabIcon is changed into in built files.

Hope this will help you :slight_smile:

4 Likes