How to make an Ionic v4 custom tab icon change color when active?

Question

I can get the custom icon to show up on the tab. However, it doesn't change color when you click it. The tab icon should go from the inactive gray to the active blue.

Tabs.html

<ion-tab-button tab="topics">
      <ion-icon src="/assets/simple-path.svg"></ion-icon>
</ion-tab-button>

A simple svg

<svg width="39" height="45" viewBox="0 0 39 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 35L15 0.5L39 15.5L25 45L0 35Z" fill="#C4C4C4"/>
</svg>

tabs.scss

path {
    --color: gray;
    --color-selected: blue;
  }

Answer 1

I was stuck on this for awhile. It turns out you need to remove the fill attributes from the svg like this:

<svg width="39" height="45" viewBox="0 0 39 45" xmlns="http://www.w3.org/2000/svg">
<path d="M0 35L15 0.5L39 15.5L25 45L0 35Z"/>
</svg>