The changing extension icons via CSS

[nazar1]

Hello! I'm interesting, Is it possible to change icons of installed extensions in Vivaldi via CSS? For example, in Firefox browser this feature exists. I tried do it same in Vivaldi, but icons don't change.

For example, I tried change icon of the uBlock Origin extension:

#cjpalhdlnbpafiamejdnhcphjbkeiagm { 

    list-style-image: url('uBlock-Origin.png') !important; 

}

And I see that icon does not change there. But if I'll write in this construction: display: none !important; the icon disappears, as expected (that is, the desired element via inspector should be correct). Am I doing everything right? Maybe there are some features with the replacement of icons specifically in Vivaldi? The browser has this feature, in the end? Previously, I was able to change the icons by directly replacing them in the extension folders, but I would like to know exactly about the CSS-method.

PS: Why is it interesting to me? Just sometimes extension icons look too specific or do not match with the theme (for example, if extension with black icon, but also I use dark theme), so their replacement is quite useful.

//MODEDIT: Changed quotes to code blocks.

[pafflick]

I assume you're talking about the icons displayed next to the address/search bar. I don't know why you're using the list-style-image property, but it's the reason why it doesn't (and will never) work.
Here's a sample code that you should use instead (there are probably other ways too, I'm just presenting you one that will work):

.extensions-wrapper button#cjpalhdlnbpafiamejdnhcphjbkeiagm /* uBlock Origin ID */ {
    background-image: url(/*url to your custom icon*/);
}
.extensions-wrapper button#cjpalhdlnbpafiamejdnhcphjbkeiagm img {
    visibility: hidden;
}

[nazar1]

Thanks for answering. But when I use this code there happens something weird like on this screenshot:

I'm beginner in CSS, but probably there only icon background changes. In Firefox's version of CSS via "list-style-image" changes only icon of extension, so I tried use it in Vivaldi, because I thought it works here similar.

[pafflick]

@nazar1 I don't know the properties of the image you use. You probably need to change the background image's size and position, to make it look as intended. Here's a sample you could use:

background: url(/*url to your custom icon*/) no-repeat 50% 50%;
background-size: /*custom icon width*/px /*custom icon height*/px;

I don't know how the extensions are presented in Firefox, because I don't use it. But I know that the list-style-image property is meant to change the appearance of list item markers.

[nazar1]

Now all is good. The problem is solved. Thank you! The sample of code where all works:

.extensions-wrapper button#/*extension id*/ {
background-image: url(icon.png);
background-size: 16px 16px;
}
.extensions-wrapper button#/*extension id*/ img {
visibility: hidden;
}

[luetage]

Do extension notifications still work with this solution? I'm asking because I'm running a custom extension icon for a very long time, but I just replace 2 versions of it in the extension itself, which is obviously quite simple to do. The only downside is I have to redo this on extension update, which happens very seldom in the case of my extension.

[LonM]

@luetage change the ui button shouldn't impact an extensions ability to create notifications. Though if it suits use its own icon, it will of course use that and not your modified one.

[luetage]

Hmm, so it isn't possible if there is more than one icon in use to cover different cases. I think I'll stick with editing the extension.

[pafflick]

@luetage The notifications appear (at least in uBlcok Origin, as this was the only one that I have tested for this modification). This solution generally hides the extension's icon itself, so if an extension uses different icons, you won't see any of them - only your custom one will be visible.

[luetage]

@pafflick I just checked it myself, different icons for the same extension don't have different classes (and yeah, why should they), it's handled inside the extension. Since custom modifications currently don't survive updates I see no upside to the mod approach, only a downside in the specific circumstance that there's more than one icon.

[pafflick]

@luetage It all depends. If you're on the Stable branch, then your mods can survive up to few months. If the extension is rarely updated, then your mods on the extension itself can survive longer than that. If the extension uses different icons - modding the browser's stylesheet will be insufficient... So, each case is different.
But I'm not here to question OP's motives to use this or a different approach. I just merely provided a code that they asked for. I don't use it myself though - so far, I'm fine with the default icons of my extensions.

[luetage]

@pafflick I think the best approach is to offer your icon improvement to the extension developer for consideration

[pafflick]

@luetage Great idea - as a matter of fact, I'm going to do just that!