Customising core buttons/icons?

Hi everyone, newbie TW user here :slightly_smiling_face:

One of my wikis will be public-facing, so while looking around at customisations I decided to try Giffmex’s “share button”. Unfortunately, as a duplicate of the permalink button, it’s redundant and adds clutter to the “more” dropdown (and Giffmex’s icon has a white background, no good as I’m using a dark theme). I thought it’d make more sense to just change the original button’s icon.

I’ve imported a new icon from https://morosanuae.github.io/tw-icons/, and (after some searching and fiddling!) replacing the contents of $:/core/images/permalink-button seems to have worked fine. The only problem is the icon is now black, so I presume something else needs changing to match the other buttons.

I’m at that toe-dipping point of proficiency where recognising HTML, CSS etc on sight is fine and I can make basic changes when it’s obvious what they would do, but anything more is too complex - so TW is a bit like the deep end of the pool :sweat_smile: Where should I be looking to make this edit? Or, alternatively, is there a simpler/cleaner method to changing the button icon?

Hi Azurah, Welcome

Can you tell, which icon you did use from the tw-icons library. There are many :wink:

Thank you :grinning_face_with_smiling_eyes:

Hah, true that! I used $:/images/icomoon-free/387-share2.

If you edit the icon it starts like this:

<svg width="22pt" height="22pt" class="tc-image-icm-387-share2 tc-image-button" viewBox="0 0 16 16">
<path fill="#000000 d=..."

The fill="#000000" should not be there. So you can safely remove it. That should work. I did test it with How to create dynamic editor toolbar buttons and it worked there.

That did it, yes! I’ll probably bring in other icons so will keep it in mind.