[FEATURE] - Use codicons for activity bar icon where possible

[equinusocio]

Hello, as the theme author, I design and build theme and product icons for VS Code. Recently, we encountered an issue with this extension, which we use ourselves.

The icon on the activity bar is not using codicons or providing a codicon icon replacement. Instead, it uses a static SVG resource, which prevents product themes from customising the icons and aligning them with other icons.

Is it possible to update the icon with a codicon icon or a custom icon replacement? This way, product icon themes can update the icon where necessary. There are many folder icons available in Codicons, and they are built-in in VS Code. Here’s the full list https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

[alefragnani]

Hi @equinusocio ,

I remember trying something similar in the past, but such customization wasn't possible back then. And it seems not to be possible yet. I tried two approaches:

• A quick search in Product Icons available in the marketplace, previewing a few of them, and none changed GitLens activity bar icon, which I would suspect an extension to have such persionalization, would be it, but none of them updated it.
• Looking at the API documentation, but it seems the 'icon' contribution point for Activity Bars still only supports 'SVG' files, as you can see on this hover

But, if you know an extension that does support this, please share, and I could take a look how it works.

Hope this helps

[equinusocio]

One-line fix

@alefragnani You can use font icon as the icon property, for example "icon": "$(folder)" (folder is an icon from codicon). Check this example from other extension: https://github.com/gitkraken/vscode-gitlens/blob/211339f53c19032562e11fdd38899b22a688dac1/package.json#L26318

Or alternatively

You can also define your font icon with the new icon inside if you don't want to use a codicon default icon (see link the first post), then use it as string.

Should look something like this:

"contributes": {
  "icons": {
      "pm-folder": { // <--- The custom icon id
          "description": "...",
          "default": {
              "fontPath": "./pm-font.woff2",
              "fontCharacter": "\\E001"
          }
      },
  },
  "viewsContainers": {
    "activitybar": [
      {
        // ...
        "icon": "$(pm-folder)"
      },
    ]
  }
}

So you can use the custom icon "$(pm-folder)" as containerView icon

[equinusocio]

Why hasn’t this fix been included in the latest release? It’s a one-liner and the solution is in my previous comment.

[alefragnani]

Hi @equinusocio ,

I didn't use because I don't want the $(folder) icon as the identity of the extension. I prefer the current folder overlap / folder stack approach.

Instead, I will take a closer look at icon contributions and probably embrace it to other extension icons as well, which also needs a revamp (#520).

If you are willing to contribute on revamped versions of the current icon(s), feel free to open a PR.

Thank you