Help with ionic icon Styling

Ionic Framework Ionic Angular
1

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

.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

2

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

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

or

within your css file:

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

3

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