Material Icon Theme

approved

by GilbertzzzZZ

Material Design icons for the file explorer, matched by file name, extension and folder name. - This plugin has not been manually reviewed by Obsidian staff.

571 downloadsUpdated 5d agoMIT

logo

Material Icon Theme

Material Design icons for Obsidian

Release Icons License

English | 简体中文


File explorer with Material icons

File icons

🏞️ Show all available file icons
file icons

Folder icons

🏞️ Show all available folder icons
folder icons

Table of Contents

Features

  • Material Design file & folder icons for the Obsidian file explorer
  • 1126 icons covering 2135 file names, 1379 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 ci
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.

Settings

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.

Add custom rule

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:

Icon picker

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:

PriorityRuleExample
1Custom rules, when enabledmyext → any icon you pick
2Directory-scoped filename.config/prettierrc, .github/FUNDING.yml
3Exact filenameCLAUDE.md, Makefile, docker-compose.yml
4Longest matching extensiond.ts before ts
5Default file iconanything 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 ci
npm test              # regression tests
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
PathPurpose
src/main.tsPlugin logic
src/icon-data.tsGenerated icon registry and lookup tables
scripts/build-icons.mjsExtract SVGs from material-icon-themesrc/icon-data.ts
styles.cssIcon 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.

See CONTRIBUTING.md for development, tests, upstream updates and releases.

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.

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.