File Type Icon Themes

Is there a way (or plans on adding a way) to let an extension provide a set of file type icons (like for example Material Icon Theme)?

2 Likes

We’ve had a couple of requests for this. It’s not on our “soon” list in any way, but we will keep it in mind!

1 Like

Custom file icons is a cool but not foundamental feature, however having a blank icon feels a bit like an error to me. Wouldn’t be possible to assign at least on of the built-in icons?

In the definition of a syntax grammar we already specify the file type:

<meta>
	<name>Vue</name>
	<type>structured</type>
</meta>

From the list of available options seems to me that specific icons for each of them are already in place. Why don’t use this property for assigning the file icon? I guess it would be easier than supporting custom icons and could be a workaround in the meantime.

1 Like

+1 on this. I use Astro and having a blank icon feels… wrong. There’s already an extension to add support for Astro to Nova, and honestly I just figured it was supposed to add an icon too, but I’m just now finding out that it’s not possible yet. For such a tiny feature, it’s literally the one thing that’s making me lean towards going back to VS Code. :frowning:

As long as Nova doesn’t provide a native way for changing or extending the file icons, here is a little hacky way to do so:

Add new file icons

Quit Nova.
Go to your applications folder or wherever Nova is installed to and right click Nova.app and choose “Show Package Contents” in the appearing context menu.
In the Nova folder (which is hidden behind Nova.app) you will find under ContentsResources a file called DefaultIcons.json. Copy this file anywhere as a backup, in case you break anything. Open this file with your favorite alternative editor of choice (e.g. CotEditor). You will see that this file maps file types or file endings to specific image identifiers.
If you want to add an icon for a yet unsupported file type like .astro, you just need to extend this list (called fileIcons) by a new entry like so:

{
   "image": "filetype-astro",
   "pathExtensions": ["astro"]
},

Now you need to provide the actual icon. It must be a png in two sizes: 16x16 and 32x32. The 16x16 version must be named <image>.png and the 32x32 version <image>@2x.png, so in our example: filetype-astro.png and filetype-astro@2x.png.
filetype-astro
filetype-astro@2x
Both image versions now just must be copied to the Resources directory where you also found the DefaultIcons.json.
Voilà new icon added.

Change existing file icons

If you want to change an existing file icon you can do so by searching for the respective entry in the DefaultIcons.json file described above. Let’s assume you want to change the icon for .ts-files.
The respective entry is:

{
   "image": "filetype-script-ts",
   "pathExtensions": ["ts"]
},

To now change this icon you will just need to change the assigned image to a custom one like from filetype-script-ts to filetype-script-ts-alt and provide the actual image the same way as described above for adding new icons.
This means adding a 16x16 version called filetype-script-ts-alt.png and a 32x32 version called filetype-script-ts-alt@2x.png to the Resources folder.
Note: Just dropping in a filetype-script-ts.png and filetype-script-ts@2x.png will not work since images seem to be resolved first from the bundled Assets.car file where these images already exist. An alternative would be to use https://github.com/jslegendre/ThemeEngine and change the images inside of the Assets.car file, but I think this is a lot more “risky” and not very straight forward way to achieve the goal.
Final result:

1 Like

An FYI on doing this: This will break code signing of the app bundle, and may prevent the app’s updater from working.

Thanks for pointing that out! But restoring the original DefaultIcons.json file and removing all custom assets would restore code signing, right? If so, this would be totally worth it for me.

I am not entirely sure that would work. A new app bundle would need to be downloaded if that is the case.