Help with ionic icon Styling

Hi, i have a split pane menu and when a menu item is selected this css is applied to it using routerLinkActive=“active-link”:

    --ion-text-color: var(--ion-color-primary);
    font-weight: bold;

and it works, turning the text blue.

Now the problem is that i want to use icons instead of text, does anyone know how to do this, i tried some silly things like --ion-icon-color or just some normal css styling but nothing worked. My ion-icon is inside a ion-item and the item is assigned to the css class.

Using ionic 5

One solution is to set the color prop on the icon and set the customerColor to a variable within ts:

<ion-icon [color]=“customColor”>


within your css file:

.active-link {
ion-icon {
color: var(–ion-color-primary)

hey, thanks for replying, and sorry for responding late. I tried that and it didnt work for some reason…