Anyway to custom the tabbar's icon with my own svg file?

Hi,
i want to add custom font icons to my ionic2 project please any one can help me on this.

How can you set the icon size when using it? Font-size does not seem to anything for these.

You should be able to do

width:2em;
height:2em;
3 Likes

The best tutorial I’ve successfully followed is here:

at the end of the tutorial there is a github link to download the sourcecode…

3 Likes

Awesome idea! I’ll be loading icons as dataurl for tabs to avoid flash while icon is loading. :slight_smile:

ion-icon {
    &[class*="app-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }

    // you'll need to complete the dataurl (with some tool like https://dopiaza.org/tools/datauri/index.php)
    $icon-tabs: ("forum": "data:image/svg+xml;base64,", 
    "companies": "data:image/svg+xml;base64,", 
    "wellness": "data:image/svg+xml;base64,", 
    "smiles": "data:image/svg+xml;base64,");

    @each $icon, $dataurl in $icon-tabs {

        &[class*="app-#{$icon}"] {
            mask-image: url(../assets/img/#{$icon}.svg);
            
            .tab-button[aria-selected=true] & {
                mask-image: url(#{$dataurl});
            }
        }
    }
}
1 Like

Thanks, it works great on Android. However, on Safari/iOS this method pixelates the image (visible, when using app on iPhone, or using ‘ionic serve’ on high-resolution displays on Safari). Here’s an ion-fab example:
mask-image-problem
I am using Ionic 3.3.0 and my scss has this code:

ion-icon {
    &[class*="db-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="db-search"] {
        mask-image: url(../assets/db-icons/search-primary.svg);
    }
}

The icon svg code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
    <defs>
        <path id="a" d="M1 7.75A6.758 6.758 0 0 1 7.75 1a6.758 6.758 0 0 1 6.75 6.75 6.758 6.758 0 0 1-6.75 6.75A6.758 6.758 0 0 1 1 7.75m18.847 9.557l-5.513-5.488A7.69 7.69 0 0 0 15.5 7.75C15.5 3.477 12.024 0 7.75 0 3.477 0 0 3.477 0 7.75s3.477 7.75 7.75 7.75a7.69 7.69 0 0 0 4.037-1.147l5.507 5.483a.501.501 0 0 0 .704.002l1.847-1.821a.5.5 0 0 0 .002-.71"/>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
        <mask id="b" fill="#fff">
            <use xlink:href="#a"/>
        </mask>
        <g fill="#003755" mask="url(#b)">
            <path d="M-2-2h25v25H-2z"/>
        </g>
    </g>
</svg>

The FAB:

  <ion-fab center bottom>
    <button ion-fab (click)="selectSearchTab()">
      <ion-icon name="db-search"></ion-icon>
    </button>
  </ion-fab>

Does anyone know a solution to this problem?

I am facing the same problem now, if I build with --prod, the icons disappear, if I build with debug, it shows. How did you fix that? Also the problem only started to appear after I updated the CLI from 2.2.1 to 3.10.3.

I discovered the cause of the problem but I am not sure how to solve it, the details and the code are posted here, would appreciate if anyone can help

1 Like

Here, what is the “background: currentColor;” I want to change color of my icon.
please suggest me what should I do for that.

Anyone has any idea how to do this with Font Awesome 5 now that they use SVG?

It is not working i have did same thing you said

Thank you !!! Its work perfect!

Thanks, it worked for me: https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/

Thanks for the solution…it worked really well for me.

Hi Iongzheng, the problem with this approach is that it is not taking the default icon color because of this css parameter “background: currentColor;”… how do i get the original svg color itself… please help

3 Likes

You should be able to just do something with background-image alone. Not tested but something like…

// Custom icons
// Overriding the ion-icon behavior
// All custom icons will start with "appname-" prefix
ion-icon {
    &[class*="appname-"] {
        background-size: contain;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-customicon1"] {
        background-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        background-image: url(../assets/img/customicon2.svg);
    }
}

Ok man. it’s work. Thanks!

thanks it was helpful :slight_smile:

Its helpful man … save lots of time.

I just realize than at this time, it’s working well.
I found this subject cause I think was not working as expected or not possible.

So I add my solution, this was in a new project,

Don’t forget that you maybe working on a white background. If you do not have a problem on call of assets, then check to change you background color to see your icon appears (svg is not in black if it’s a inserted icon from you)

easily solved this kind of problem with :

ion-icon {
color: red;
}