Icons incorrect in README.md

[RiccardoManzan]

icon - used to set a different icon in the tree view. Must be a valid octicon (see https://octicons.github.com) or codicon (see https://microsoft.github.io/vscode-codicons/dist/codicon.html). If using codicons, specify them in the format "$(icon)". The icon defaults to a tick if it's not valid. You can also use "todo-tree", or "todo-tree-filled" if you want to use the icon from the activity view.

Codicons arent working, "$(icon)" format is not recognized. I tried also with "$('icon')" format with no results.

[Gruntfuggly]

Please can you post your settings?

[RiccardoManzan]

Here it is :)

"todo-tree.highlights.customHighlight": {
        "BUG": {
            "icon": "$(activate-breakpoints)",
            "foreground": "#192434",
            "background": "#FF4A4AEE",
            "iconColour": "#FF4A4AEE",
        }
}

[Gruntfuggly]

That works fine for me - what other settings have you set for todo-tree?

[RiccardoManzan]

Hummm, kinda strange, i can see icon in left panel: But i cant see it in text editor that's why i thought codicons werent working

Note that note has an octicon

[Gruntfuggly]

You need to set gutterIcon to true. But you're right, it looks like only octicons work in the gutter. I'll investigate.

[RiccardoManzan]

Thanks for your tempestive help! :)

[Gruntfuggly]

Ah - I know why it doesn't work. Gutter icons only work for octicons because I use a node module to convert them into svg's. There is no similar module for codicons unfortunately, so if you want them in the gutter, you'll have to stick to octicons I'm afraid.

I'll update the README.md to make this clearer.

I will check to see if there is any other way to do it though.

[Gruntfuggly]

No, it's not possible. I've opened a feature request with vscode, but I doubt it will get enough support to be implemented. https://github.com/microsoft/vscode/issues/109227

[meoya]

Hummm, kinda strange, i can see icon in left panel: But i cant see it in text editor that's why i thought codicons werent working

Note that note has an octicon

Hello, your icon is very beautiful, what icon do you use？

[RiccardoManzan]

Look at https://primer.style/octicons/ I'm using flame, zap and star. First one is https://microsoft.github.io/vscode-codicons/dist/codicon.html rocket

[meoya]

Look at https://primer.style/octicons/ I'm using flame, zap and star. First one is https://microsoft.github.io/vscode-codicons/dist/codicon.html rocket

I really want to know that: how to fill up the color of the icon? and thank you very much!

[RiccardoManzan]

Actually I was wondering why my icons were different from octicons site. My configuration is that:

"todo-tree.highlights.customHighlight": {
        "BUG": {
            "icon": "alert",
            "foreground": "#192434",
            "background": "#FF4A4AEE",
            "iconColour": "#FF4A4AEE"
        },
        "FIXME": {
            "icon": "flame",
            "foreground": "#192434",
            "background": "#db4d67",
            "iconColour": "#db4d67"
        },
        "HACK": {
            "icon": "zap",
            "foreground": "#192434",
            "background": "#49F3C3",
            "iconColour": "#49F3C3"
        },
        "XXX": {
            "icon": "star",
            "foreground": "#192434",
            "background": "#49F3C3",
            "iconColour": "#49F3C3"
        },
        "TODO": {
            "icon": "zap",
            "foreground": "#192434",
            "background": "#1275f5",
            "iconColour": "#1275f5"
        },
        "NOTE": {
            "icon": "star",
            "foreground": "#192434",
            "background": "#5099ab",
            "iconColour": "#5099ab"
        }
    },
    "todo-tree.highlights.defaultHighlight": {
        "gutterIcon": true
    },

I don't really know what makes them look like that.

[meoya]

Actually I was wondering why my icons were different from octicons site. My configuration is that:

"todo-tree.highlights.customHighlight": {
        "BUG": {
            "icon": "alert",
            "foreground": "#192434",
            "background": "#FF4A4AEE",
            "iconColour": "#FF4A4AEE"
        },
        "FIXME": {
            "icon": "flame",
            "foreground": "#192434",
            "background": "#db4d67",
            "iconColour": "#db4d67"
        },
        "HACK": {
            "icon": "zap",
            "foreground": "#192434",
            "background": "#49F3C3",
            "iconColour": "#49F3C3"
        },
        "XXX": {
            "icon": "star",
            "foreground": "#192434",
            "background": "#49F3C3",
            "iconColour": "#49F3C3"
        },
        "TODO": {
            "icon": "zap",
            "foreground": "#192434",
            "background": "#1275f5",
            "iconColour": "#1275f5"
        },
        "NOTE": {
            "icon": "star",
            "foreground": "#192434",
            "background": "#5099ab",
            "iconColour": "#5099ab"
        }
    },
    "todo-tree.highlights.defaultHighlight": {
        "gutterIcon": true
    },

I don't really know what makes them look like that.

I get it, thank you very much!

[Gruntfuggly]

Remember it can use octicons or codicons - they are slightly different.

If using codicons, specify them in the format "$(icon)"

I think the flame icon used to be filled in, but the version octicons I'm using was updated recently. It might be showing them filled in because when you change the colour, it caches a coloured version of the icon. It might have been finding your older cached versions.

[Gruntfuggly]

@RiccardoManzan It doesn't look like this is going to get supported (see microsoft/vscode#109227) unless you can drum up some support from somewhere?

[RiccardoManzan]

Well, the easiest solution is use only octicons. So, i suggest inserting a disclaimer in the readme and i think this issue can be closed.

Or, the solution can be converting svg icons to png icons, and store them in some cache before use them.

[Gruntfuggly]

Thanks, but this issue has gone off-topic - the icons in the README.md are simply out of date - I just need to update them! 😄

The vscode issue linked above was to allow theme icons in the gutter - without that only octicons will be available in the gutter, which is already mentioned in the README.md.