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

By accident I came across tthis post. I also need to use my own SVG…

when I build the app on the device custom icons made in css are empty rectangles.
Do you know how I can fix this?

1 Like

Hi anz120,

you are using wrong path make it correct

1 Like

It works for me, thank you very much.

Do you know also how to create an active and non-active icon for tabs and other components?

I came up with a new way to use custom SVG icons with ion-icons that maintains the flexibility to apply different colors with CSS color. With CSS masks!

First, I make sure I define all my icons with a special prefix in HTML like so

<ion-icon name="appname-customicon"></ion-icon>

Then I add this to my app.scss

// Custom icons
// Overriding the ion-icon behavior
// All custom icons will start with "appname-" prefix
ion-icon {
    &[class*="appname-"] {
        // 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*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
}

Basically what I’m doing is for all ion-icon elements with a class that contains “appname-”, define the background color to be what the foreground color to be. Then I’m setting a CSS mask to essentially mask the background with my custom icon SVG.

Because there won’t be any content, I need to manually set the size to be a square the size of an font em.

I can then define as many custom icons as I wish by simply adding a new rule. I just have to be careful not to have any rules that are subsets of another since I have to use the CSS attribute value ANY selector.

You can also define a different SVG for the “outline” version by adding a new rule.

22 Likes

Nice approach, but is it also possible to distinguish between iOS and android specific icons? I did not manage it…

1 Like

I’m using a method based on this post, for instance:

.ion-ios-ratio,
.ion-md-ratio {
  content: url(../assets/icons/ratio.svg);
  padding: 2px 0px 3px;
  // opacity: 0.9;
  width: 24px;
  height: 32px;
}

.ion-ios-ratio-outline,
.ion-md-ratio-outline {
  content: url(../assets/icons/ratio-outline.svg);
  padding: 2px 0px 3px;
  // opacity: 0.9;
  width: 24px;
  height: 32px;
}

The only platform where it doesn’t work is Firefox. I just get empty buttons. I’m preparing to publish my App on the web as well.

I’ve been looking with the inspector, but I can’t find anything wrong. Anyone know how to fix it?

4 Likes

Works great @longzheng!

Works great with Ionic’s current version. Thank you for sharing this approach!

Thanks, this works. But do you know how to set the color of the icon? (Selected/Unselected).

1 Like

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.