Skip to content

How to use Icons in package.json for Language Icon #287

@dschiller

Description

@dschiller

Describe the bug
In package.json one can use icons like

...
            "commands": [
            {
                "category": "Testplan Manager",
                "command": "testplanManager.document.goTo",
                "title": "Go to",
                "icon": "$(arrow-right)"
            },
...

But that doesn't work for languages:

...
    "contributes": {
        "languages": [
            {
                "id": "testplan",
                "aliases": [ "Testplan" ],
                "extensions": [ ".tp" ],
                "configuration": "./language-configuration.json",
                "icon": {
                    "dark": "$(arrow-right)",
                    "light": "$(arrow-right)"
                }
            }
        ],
...

Image

Because there it seems we need to use SVG files. As you provide the SVG Sprite option:

<svg>
    <use xlink:href="codicon.svg#add" />
</svg>

How to use this approach or another in package.json for language icons ?

To Reproduce
Steps to reproduce the behavior:
See description

Expected behavior
See description

Screenshots
If applicable, add screenshots to help explain your problem.

Environment

  • OS: Mac
  • VS Code Version:
    Version: 1.97.2 (Universal)
    Commit: e54c774e0add60467559eb0d1e229c6452cf8447
    Date: 2025-02-12T23:20:35.343Z (2 wks ago)
    Electron: 32.2.7
    ElectronBuildId: 10982180
    Chromium: 128.0.6613.186
    Node.js: 20.18.1
    V8: 12.8.374.38-electron.0
    OS: Darwin arm64 23.6.0

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue identified by VS Code Team member as probable bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions