microsoft / microsoft/vscode-codicons

How to use Icons in `package.json` for Language Icon

Open
#287 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Handlebars
Stars
1.2k
Forks
210
Avg merge
43m
Merged PRs (30d)
3

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the language contribution in package.json and compare its icon fields with the command icon example. Review the codicon.svg#add sprite usage shown in the report, then establish whether $(...) syntax is supported for language icons and document the supported approach or reproduce the missing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
vscode
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.