Material Icon Theme

by Gilbert
5
4
3
2
1
Score: 50/100
New Plugin

Description

Material Design icons for the Obsidian file explorer, matched by file name, extension and folder name.

Reviews

No reviews yet.

Stats

0
stars
downloads
0
forks
0
days
0
days
0
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
8
commits

README file from

Github

File icons

Folder icons

Table of Contents

Features

  • Material Design file & folder icons for the Obsidian file explorer
  • 1125 icons covering 2131 file names, 1380 extensions and 269 folder names
  • Custom icon associations through a searchable picker
  • Independent toggles for file and folder icons
  • Settings UI in 10 languages
  • Easy to use, and it follows your light / dark theme live

Getting Started

Requires Obsidian 1.13.0 or newer.

  1. Install the plugin Download main.js, manifest.json and styles.css from Releases into .obsidian/plugins/material-icon-theme/.

  2. Enable the plugin Open Settings → Community plugins and turn on Material Icon Theme.

  3. Enjoy your new icons The file explorer picks them up immediately — no restart needed.

Release tags match manifest.json exactly (e.g. 1.0.0, not v1.0.0), as Obsidian requires.

Build from source

git clone https://github.com/GilbertzzzZZ/obsidian-material-icon-theme.git
cd obsidian-material-icon-theme
npm install
npm run build
cp main.js manifest.json styles.css /path/to/vault/.obsidian/plugins/material-icon-theme/

Customization

Everything lives under Settings → Material Icon Theme.

File & folder icon toggles

File icons and folder icons switch on and off independently. Turning either off hands that half of the explorer back to your theme's own icons.

Custom icon associations

Map any file extension to any icon in the library. Custom rules take priority over every built-in match while enabled.

Enter the extension without its leading dot (vue, rs, myext), then pick an icon. Compound extensions work as well — a rule for d.ts wins over one for ts.

Search the full library by name when choosing:

Interface language

The settings UI ships in English, 简体中文, 繁體中文, 日本語, 한국어, Deutsch, Français, Español, Русский and Português, switchable from the top of the settings tab.

Icon matching

Files resolve in this order, first match wins:

Priority Rule Example
1 Custom rules, when enabled myext → any icon you pick
2 Directory-scoped filename .config/prettierrc, .github/FUNDING.yml
3 Exact filename CLAUDE.md, Makefile, docker-compose.yml
4 Longest matching extension d.ts before ts
5 Default file icon anything unmatched

Folders resolve by name against the folder icon table and fall back to the generic folder icon. Open and closed states swap as you expand and collapse.

Matching is case-insensitive throughout, so CLAUDE.md and claude.md resolve alike.

Development

npm install
npm run dev           # watch mode (does not regenerate icon data)
npm run build         # full production build
npm run build-icons   # regenerate src/icon-data.ts only
Path Purpose
src/main.ts Plugin logic
src/icon-data.ts Generated icon registry and lookup tables
scripts/build-icons.mjs Extract SVGs from material-icon-themesrc/icon-data.ts
styles.css Icon and settings styles

src/icon-data.ts is generated — do not edit it by hand. To add mappings upstream does not ship, edit the custom block near the end of scripts/build-icons.mjs and re-run npm run build-icons.

Both main.js and src/icon-data.ts are gitignored, so run npm run build after cloning.

Icon sources

Icon artwork comes from Material Icon Theme, consumed through the material-icon-theme npm package, which in turn draws on:

Contributing

Issues and pull requests are welcome.

Missing an icon for a file type? It is usually worth requesting it upstream too, so every editor benefits.

License

MIT. The bundled icon artwork carries its own upstream licence — see NOTICE.