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?
Hi anz120,
you are using wrong path make it correct
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.
Nice approach, but is it also possible to distinguish between iOS and android specific icons? I did not manage it…
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?
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).
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;
The best tutorial I’ve successfully followed is here:
at the end of the tutorial there is a github link to download the sourcecode…
Awesome idea! I’ll be loading icons as dataurl for tabs to avoid flash while icon is loading.
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});
}
}
}
}
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:
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
Here, what is the “background: currentColor;” I want to change color of my icon.
please suggest me what should I do for that.