How to customize icons for a new file extension

[bobbyz007]

In project explorer, I created a new file with extension '.test' and wanna display a customized file icon in left side for it, is LabelProviderContribution the right way? best to show me an example.

[kittaakos]

In your extension, you have to subclass the WorkspaceUriLabelProviderContribution:

@injectable()
export class YourUriLabelProviderContribution extends WorkspaceUriLabelProviderContribution {

    canHandle(element: object): number {
        if ((element instanceof URI || FileStat.is(element)) && your element) {
            return Number.MAX_SAFE_INTEGER; // Or a higher number than the default one.
        }
        return super.canHandle(element);
    }

    async getIcon(element: URI | FileStat): Promise<string> {
        if (your element) {
            return your icon. // For instance, `fa fa-file`.
        }
        return super.getIcon(element);
    }

}

// where `your element` has to check the file extension of the URI.

Then you have to bind your label provider contribution in your frontend module:

bind(LabelProviderContribution).to(YourUriLabelProviderContribution).inSingletonScope();

I hope this helps. If so, please close the issue. Thank you!

[bobbyz007]

@kittaakos It works.