[SOLVED] How do I make my custom SVG icons display correctly? (Inkscape, Ionic 4)

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.

they are greyed out when the tab is deactivated
they get the primary color when the tab is activated

If I create my own b/w SVG icon with Inkscape, the result is that the icon does not change its color.

the tab icon always has the original color (black) only the caption changes the color accordingly

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:
- https://www.flaticon.com/free-icon/airplane-shape_59919
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 absolutely sure that the icon is an icon of one single color: black.
- I tried the "Object to Path" functionality and other desparate measures but it did does not help

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>

Tab One has an out-of-the-box Ionicons icon
Tab Two uses the above mentioned Airplane icon
Tab Three references the non-working selfmade icon

In this picture you can see all three tabs selected one after the other and the third icon does not change its color:

Image: wrong icon behaviour

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!