Allow custom icons for reference/IntelliSense components

[Fconstant]

• VSCode Version: 1.12.2
• OS Version: Windows 10 x64 Pro

Allow customization of icons when you import a new module OR use the IntelliSense autocompletion.

Example with TypeScript:

export const Const = 2;
export class Class {}
export interface Interface {}
export let Let = '23';
export type Type = {}
export function Function() {}

... And then when you import:

So, there are these default IntelliSense Icons

I wanted to use the class and interface icons more like Eclipse's icons for Java components.

Another thing to notice: type and class have the same icon, and it can be really confusing sometimes.

PS: I don't know how it's supposed to be on other languages, I've only noticed this on TS (And JS).

[jrieken]

Do you want to customise it globally for all languages for just a single language? The latter would be really hard on users I believe because we try to streamline the editing experience for various programming languages

[Fconstant]

@jrieken Yeah, I thought about that too. I really don't know how VS Code treats that on other languages. But maybe that should be parametrized. If the user wants to be global or not, then he decides it. I think that would be nice to just start with JS/TS, as a experimental feature.

EDIT
Actually, It would be easier to be a global config for now

[jrieken]

fyi @aeschli who master icon themes et al

[lukaszpolowczyk]

Definitely today's icons are completely unreadable. Why a box for variables? wireframe for functions? Where did it come from?

What do the icons look like in other editors?

[Kroc]

As a general suggestion, Microsoft could include a number of additional icons spare in the program that extension developers can make use of without having to provide their own for some slight better consistency.

[vscodebot]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

[gryphon2411]

@jrieken why this issue was marked as *out-of-scope?

This issue seems to be useful for many users, which are not into remembering icons, but rather use easy letter hints.

[ghost]

I think this should be reopened. Letters would be a lot nicer for this, as we can see that Microsoft don't know what they're doing when it comes to icons lol.

[Fconstant]

Icons should be easily distinguable and self-explanatory.
Current icons are so hard to understand and associate with.
Please reopen this issue.

[DeltaRazero]

I've been wanting to replace the IntelliSense icons with custom ones as well for in an icon theme.

Please reopen this issue.

[kingkong404]

+1 Reopen, Icons are terrible

[wyuenho]

please reopen

[sss-ng]

Reopen, please. There needs to be a difference between the icons of Interface and Class in java.
Angular does a great job of changing the icon depending on whether it is a module, component, service, etc. Though I suspect that is because of the naming conventions, ie. navigation.component.ts

[DeltaRazero]

@arid-mangos It's possible to have custom intellisense icons with product themes (still in development)
#92791 (comment)

Only problem is that icons are (a) a single color only, as they are imported as glyphs from an icon-font (so no SVGs) and (b) have their colors defined in a color theme (or you need to set/paste them into your user config file). It's funny as the intellisense icons are rarely ever changed from their default values in color themes

[ghost]

I love the intellisense icon in WebStorm. Can you something similar?

[DeltaRazero]

@lifeoflikhon I have been working on an extension providing file icons and product icons. I still need to do add some icons, but I will publish it once product icons API is finalized.
Bear in mind there are some limitations for colouring product icons, since VSCode's only allows glyphs for those icons and thus only are icons are only a single colour.

Is this something you would be happy with?

[pedzed]

Very frustrating. Using PHP, every single time I mix up class properties and class methods.

@DeltaRazero Any update on this?

[DeltaRazero]

@pedzed Sorry for the late reply. I hadn't really continued much but am planning to revisit this. I'm still kinda angry how multi-colored icons still aren't possible (I have tried with COLR fonts too to cheat it but it doesn't appear Electron/VSCode supports it). So for icons that rely on transparency parts or multiple colors, I have to edit them manually. Apparently COLRv1 through woff2 is supported. Trying out some things at this point but I might be in luck.
Besides, it appears JetBrains have introduced a new style of icons so I will need to add that too.

If it is of any value to you, I can post a link to the older work in progress extension VSIX to install locally

[DeltaRazero]

So I have rewritten my icon theme generator for the most part, and while I need to iron out some parts still, I can testify with COLRv1 woff2 fonts you can have (multi-)colored product icons

Can't give a precise ETA but I'll be working on completing that IntelliJ theme in the coming time.

[Number-3434]

@DeltaRazero Is this extension out yet?

I've already seen a screenshot of someone using this.

P.S. Is it possible to use the extension for your own custom icons?