When I use any out-of-the-box Ionicons or other customly made SVG icons in my tabbed ionic application they all work fine, i.e.
If I create my own b/w SVG icon with Inkscape, the result is that the icon does not change its color.
My best guess is that I am doing something terribly wrong when creating a proper icon with Inkscape in the first place.
What have I done to research my problem?
First I took a freely available SVG icon from the web and used it in my tabbed ionic application as custom icon. This worked perfectly as expected! I used this nice Airplane Shape by GraphBerry:
Then I loaded the very same SVG into Inkscape and just stored it as "Inkscape SVG". The file size is slightly bigger due to all the additional stuff that is added by Inkscape. It still works perfectly though.
Then I added a simple circle to the airplane shape and stored it again as Inkscape SVG. Loading the resulting SVG as custom icon still works flawlessly!
Next I started a new icon from scratch and added 6 non-intersecting circles with the default Inkscape color. It was stored as Inkscape SVG and it worked smoothly!
Now the trouble begins! I started a new icon again, now I had two intersecting circles, one was black, the other one was grey. I used the grey one to "cut off" a part of the black circle with the "Difference" operation. The result is a black-only kind of a "crescent moon". Saved as an Inkscape SVG and used as a custom icon in my app. It stays black, and black only. No greying out, no focus color, nothing. Only the caption of the tab adapts colors accordingly.
I am unsure what is wrong with my SVG file, but I suspect that it is not enough to make the SVG single coloured to make it a useful icon?
There is probably nothing wrong with the ionic / typescript code as such, because custom icons work for me in general. But if you want to try a simple Ionic 4 example with my wrong SVG, try this:
Create a standard tabbed ionic application with 3 tabs:
ionic start tabtester tabs
Now copy the SVG files to the "/assets/icon/" directory.
After that, add the custom icons in the file "/app/tabs/tabs.page.html".
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon src="assets/icon/airplane-shape.svg"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon src="assets/icon/custom-shape-cut-circle.svg"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
In this picture you can see all three tabs selected one after the other and the third icon does not change its color:
This is the non-working svg/xml code for the third icon named "custom-shape-cut-circle.svg":
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="612mm"
height="612mm"
viewBox="0 0 2168.5039 2168.5039"
id="svg4137"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="cusoim-shape-cut-circle.svg">
<defs
id="defs4139" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.24748737"
inkscape:cx="606.12303"
inkscape:cy="1233.4996"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1680"
inkscape:window-height="997"
inkscape:window-x="1672"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata4142">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,1116.1417)">
<path
style="opacity:0.98000004;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.53516412;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98039216"
d="M 951.78671,-1021.0711 A 967.75597,989.18228 0 0 0 248.96227,-710.12864 945.97847,886.05228 0 0 1 1076.422,168.09039 945.97847,886.05228 0 0 1 650.77296,907.50594 967.75597,989.18228 0 0 0 951.78671,957.29165 967.75597,989.18228 0 0 0 1919.5415,-31.888051 967.75597,989.18228 0 0 0 951.78671,-1021.0711 Z"
id="path4685"
inkscape:connector-curvature="0" />
</g>
</svg>
The expected behaviour of the third icon should be similar to the second one, it should be greyed when on a deactivated tab and blue when on the activated one.
What is the trick?
UPDATE:
With the great answers of @Moini and @j-t-houtenbos I finally understood the problem of my custom files.
The styling is the problem, and now that I know of the cause, I finally understood the Inkscape Fill/Stroke option "paint undefined". With this option checked (instead of styling Fill/Stroke with any color) the custom icon works flawlessly!
This is where to find the option: Image: Inkscape option "paint undefined"
After the information I got in the answers, I would recommend to use this option only when drafting. It makes your development easier, as you do not need to manually edit the SVG every time.
When creating a custom SVG for production I highly recommend to use the procedures described by @j-t-houtenbos The resulting file size is much smaller and the icon is still fully functional!
The main difference between the two graphics with relation to styling is that the one that works has no style information at all.
So, save as optimized SVG to remove all the Inkscape-specific stuff, and then open the file with a text editor and remove all style info (style="op....").
