Change 'Back' icon SVG color in CSS without changing 'Magnifying Glass' icon color

Hi Bfarkas, 

Really appreciate the help and will do in the future! Unfortunately, I added your code into the CSS box and it doesn’t seem to give the desired result. 

For more context, when I change the fill with this rule (original code) it modifies the fill of both the magnifying glass and back icons to grey. 

dcb-ui-icon span.color-negative svg, ui-icon span.color-negative svg {
    fill: #414041 !important;
}

In contrast, when I add this into the CSS, both the magnifying glass and back icons switch to white. Even when I add !important

g#chevron-left { fill: #414041; }

The desired outcome here is to switch the back icon to HEX #414041 all while leaving the magnifying glass white. 

Any help you can provide is greatly appreciated!

The above CSS that @Bfarkas provided should work just fine to do what you are asking.

If it does not, I might suggest that either

1. You have a typo in your CSS causing it not to work
2. You have a rule coming after that overrides it

I noticed in your code above - you have !important

If all your rules are tagged important - the one that is loaded last will prevail.

g#chevron-left {
    fill: #414041 !important;
}
g#chevron-left {
    fill: #0000ff !important;
}

Consider the above example.

The chevron will appear blue - even though your desired color is tagged !important. The next one is also tagged that way and will “win” because it comes after.

The order of your rule placement in the Branding and Look area makes a difference.

Hope that helps.

Tagging onto Greg’s answer, for this exact reason it is generally not great to just throw !important’s unless there is no other way as it causes issues down stream. Generally in the Docebo setup you don’t need them.

You’re previous entry is a fairly broad scoped item as it will apply to any SVG that uses the declared negative color which is why multiple icons, probably more than just the two of the back and the magnifying glass, are changing. 

Definitely be careful with your order, organization, and selections for custom CSS work. If you aren’t already, make sure to comment out what each block is for too so that you and others can always quickly find what a block was for and what it will be impacting to change it or fix something.

Thank you both for the answers, they're very much appreciated. 

Unfortunately, I'm inheriting the CSS from someone who did not comment out much at all and it is quite lengthy. This is also my first attempt at CSS ever!

After having tested a while longer, the code you provided definitely does allow me to fix the < icon. 

g#chevron-left {
    fill: #414041 !important;
}

What I could not figure out was how to modify the >, which I've since deduced is chevron-right as in this rule: 

g#chevron-right {
    fill: #414041 !important;
}

The < and > icons are now grey whereas the magnifying glass is white. Sharing in case it can help someone out in the future. 

Thanks again!

Great job!

Welcome to the CSS fun club!

@Bfarkas @gstager 

A question...follow up the CSS fun club!! 😁

Is there a way to customize ( by CSS ) the primary color for each Page-Menu?

Can you specify what you mean by each page menu? The way I interpret it, is most likely a no unofrtunately.

Also, for anyone checking this thread out in the future, I’ve added all the icons and back chevron to the CSS Configuration Wizard in FarkTools for easy updating.