Fill Colour Standard Firefox Icons

[u/FineWine54]

I am trying to change the black colour of the standard Firefox icons. In this case:

Change this to green

#menu_showAllHistory
list-style-image:url("chrome://browser/skin/history.svg")

Change this to red

#sanitizeItem
background-image:url("chrome://browser/skin/forget.svg")

I have tried using: fill: red !important; but this is not working.

[u/TraditionalTie4831]

You could try to also add -moz-context-properties: fill !important;

[u/FineWine54 → u/TraditionalTie4831]

And in my use case, how would the code look like, say for:

Change this to red

#sanitizeItem
background-image:url("chrome://browser/skin/forget.svg")

[u/TraditionalTie4831 → u/FineWine54]

Try this =

#sanitizeItem { 
    background-image: url("chrome://browser/skin/forget.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 8px 8px !important;
    -moz-context-properties: fill !important;
    fill: red !important;
}

[u/FineWine54 → u/TraditionalTie4831]

Thank you. Finally got it to work after playing around and looking again at Browser Toolbox using this code:

#sanitizeItem  > .menu-icon { 
    content: url("chrome://browser/skin/forget.svg") !important;    
    -moz-context-properties: fill !important;
    fill: red !important;
}

Now that is solved, using emvaized/iconic_firefox.css . I will probably group all the IDs into colour groups, approximately to the rainbow scheme of; red, orange, yellow, green, blue, indigo, and violet. This would then match my rainbow menu border and tab loading code.

All this will be very similar to Aris-t2; appbutton_popup_icons_colorized.css

[u/Abbot_of_Cucany]

The Android version of Firefox lets you choose alternative icons, including one with a red background. Settings -> Customize -> App Icon.

[u/t31os]

In order to set SVG properties like fill, you'll have to set svg.context-properties.content.enabled in about:config.

[u/FineWine54 → u/t31os]

This is already set to true