Category Icons color and size is not being inherited correctly

When using the Navbar component with Category Icons, the icons end up the same color as the text (–primary-high) and not the category - and are smaller than they should be:

image

I’ve worked around these issues via CSS:

.custom-categories-navbar a[href="/c/public/198"] .badge-category__icon .d-icon {
    color: var(--category-198-color);
    height: 1em;
    width: 1em;
}

which gives this:
image