How to remove blue square from right arrow icon?

It doesn’t matter whether I copy and paste it, or use the html code, it appears normally in the text of the tiddler in this image, but appears as a blue box with a white arrow when in the toolbar. What do I do? What is causing this? Using Google Chrome.

Which icon do you use? Do you have a link to tw-com? So we can actually see the icon.

Funny, I had just started to compose a reply:

Perhaps some more advanced users can diagnose this directly from that info, but for users like me, it would very much help to have a button tiddler JSON file that we can drag to tw dot com or an empty wiki.

when I saw that one of those more advanced users I was thinking about (@pmario) was typing a response, I put it aside for a few minutes, only to come back and find he was also asking for more info! :slight_smile:

Do you have access to developer tools on Chrome, I think it is there by default and you should have it but I don’t usually use chrome so not 100% sure.

If you right click on the icon you may/will see a drop down that includes the option “inspect” - select that and you will be presented with the SVG code for the icon and in addition any CSS that is affecting it. You should also be able to click on any CSS colours ( as represented by a small colour swatch and check any suspicions by changing the colour as an experimental verification ). Of course the change is not permanent but it enables you to find what is causing what CSS wise.

Update: I just tried it, it works for me for finding CSS for tiddler icons, the only caveat is that the CSS that was displayed had the word “selected” in its name because I right clicked on it to select it for inspection, however the non highlighted CSS was next in the cascade and also shown so a little experimentation might lead you to the result you want. In the example below I right clicked on the downward chevron arrow that now appears in red it was originally grey, I clicked on the drop down option “inspect”, I was shown the SVG code for the icon plus any CSS that affects that icon, I altered the CSS to change colour just to make sure, just left click on the small colour swatch and chose a colour of your preference from the colour picker that pops up. Changing colour on an item is often a good way to establish that you are looking at the right bit of CSS.

You can see I changed the CSS colour swatch for .tc-tiddler-controls button svg to red.

There was a CSS entry higher in the cascade which I mentioned previously - it had “selected” in the name, the CSS that I actually altered at that stage had a line strike through indicating that it had been superceeded by the “selected” version which was higher in the cascade but does not appear in the picture below because…When I had finished I deselected the button so that the “selected” CSS disappeared, the previously superceeded and altered (red) CSS now appeared without strike through and so the button appeared red - and a few others there as well. Hopefully you can use this to track down the colour differences you are seeing there.

Thanks jonnie, I will give that a try tonight!