Keepassxc-browser: Is there a way to change this icon?

[ghost]

Hey, I wanted to know if there was a way to change this icon.

KeePassXC - 2.3.4
KeePassXC-Browser - 1.3.0
Operating system: Windows 10
Browser: Chrome

[varjolintu]

So the user can change it dynamically to some other icon? Currently there's no way to do that.

[ghost]

I'm new to the js environment, but I can see that in the icons folder ( https://github.com/keepassxreboot/keepassxc-browser/blob/develop/keepassxc-browser/icons/key.png )

The key.png can be replaced.

But I have no idea, how to combine it into a chrome extension.

[droidmonkey]

Suggest a new icon in here and we can tell you if we like it. I personally hate that key icon.

[varjolintu]

I personally don't hate it or like it. Just used to it. I had a SVG version of it at some point but I didn't make a PR about it. If we really want to replace that icon at some point, I'd suggest a SVG icon instead.

[whisdol]

What kind of icon do you have in mind?
Generic keys?
Ionic:
ForkAwesome: (excuse the screenshot)

Something with arrows (that would indicate some kind of "change" or "generation"), like is used in this app icon? (Probably rotated by 90°)

[droidmonkey]

I like the ForkAwesome one. We could make it the KeePassXC green color.

[varjolintu]

I like the ForkAwesome icon too. I'll make a PR for this soon.

EDIT: The problem using Fork Awesome (or something similar) is that the CSS must be injected to content scripts, and that's not something we want to do. Instead, we should use the SVG file directly.

[varjolintu]

@droidmonkey Something like this? I added a small border to the SVG but it could be better. The plain green color is not very distinguishable.

[grenzor]

The new icon looks nicer on that page. Flipping it horizontally and making it smaller would make it better IMO.

[varjolintu]

The latest modifications:

I ended up scaling the SVG itself because in that way centering and adjusting the icon doesn't need any JavaScript magic.