💡 Changing Extensions icon in left-sidebar to match the theme.

[Godiesc]

The next steps give you the way to change successfully the icon of your extensions that you want to put in the Left-Sidebar to match the theme:

1. You will need to get a new icon to replace the extension default one, so first search in internet and download it, I usually use this web page to get them: svgrepo, be sure to download it in svg format.

2. Open the image with a text-editor program and add/change the property 'fill' or 'stroke' with 'context-fill' like this:
fill="context-fill" or stroke="context-fill"

3. In this example I will use the 'gmail mail sidebar' extension, I downloaded the icon and edited following the steps 1 and 2, now I will put the icon into chrome/icons folder.

4. For the next step you need to know the ID of the extension so to get it you need to open a tab with the next url: about:debugging#/runtime/this-firefox and search for the extension and copy the ID:

5. The next code you will use it for each of your extensions changing the ID and the name of the new icon, you can use the chrome/components/ogx_tricks.css file to do it.

/* Gmail extension */
#PersonalToolbar #_bad8f620-500d-4572-bbe3-e8677e1524b1_-BAP { list-style-image: url(../icons/logo_gmail.svg) !important; }

RESULTADO

---

⚠ Some extensions have alphanumeric IDs and you will have no problems with it, but some other extensions may have special characters (like @ or . ) that must be replaced in the code, for example the Chatwapp in sidebar extension the @ was replace by _.