No description
Find a file
diya 4d28f24494 fix: use Obsidian-compatible release tags and description
- Match release tags to manifest version (1.0.0, no v prefix)
- Update workflow tag filter and dispatch default
- Polish manifest description and ensure trailing period

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-04 18:21:28 +08:00
.github/workflows fix: use Obsidian-compatible release tags and description 2026-06-04 18:21:28 +08:00
docs/screenshots docs: add screenshots and Chinese README 2026-06-04 17:41:05 +08:00
scripts fix: use Obsidian-compatible release tags and description 2026-06-04 18:21:28 +08:00
src Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
.gitignore feat: rename plugin id and release Obsidian-required assets 2026-06-04 18:16:43 +08:00
CONTRIBUTING.md Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
esbuild.config.mjs Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
LICENSE Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
manifest.json fix: use Obsidian-compatible release tags and description 2026-06-04 18:21:28 +08:00
package-lock.json Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
package.json Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
README.md fix: use Obsidian-compatible release tags and description 2026-06-04 18:21:28 +08:00
README.zh-CN.md fix: use Obsidian-compatible release tags and description 2026-06-04 18:21:28 +08:00
styles.css Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00
tsconfig.json Initial release: Material file icons for Obsidian 2026-06-04 17:26:51 +08:00

Material File Icons for Obsidian

English | 简体中文

Replace the default file explorer icons in Obsidian with Material Icon Theme icons, matched by file extension and filename.

File explorer with Material icons

Screenshots

File explorer

Icons are applied by extension and filename — canvas notes, Markdown templates, folders, and more each get a distinct icon (see preview above).

Settings

Toggle file and folder icons independently, enable custom rules, and switch the settings UI language (10 languages supported).

Settings

Custom rules

Add a rule for any extension (without the leading dot) and pick an icon from the Material Icon Theme library. Custom rules override default matching when enabled.

Add custom rule

Icon picker

Search and browse 500+ icons when configuring a custom rule.

Icon picker

Features

  • Extension matching — longest suffix wins (e.g. d.ts before ts)
  • Filename matching — e.g. .gitignore, Makefile, docker-compose.yml
  • Folder icons — closed / open states
  • Custom rules — override icons per extension with a searchable icon picker
  • Toggles — enable or disable file / folder icons independently
  • Settings UI — English, 简体中文, 繁體中文, 日本語, 한국어, Deutsch, Français, Español, Русский, Português
  • Light & dark — icons follow Obsidians theme

Installation

Release tags match manifest.json version exactly (e.g. 1.0.0, not v1.0.0) for Obsidian community installs.

  1. Download from Releases:
    • Zip: material-file-icons-x.x.x.zip — extract into .obsidian/plugins/
    • Or download main.js, manifest.json, and styles.css into .obsidian/plugins/material-file-icons/ (required for Obsidian community install)
  2. Enable Material File Icons under Settings → Community plugins

Upgrading from an older build? The plugin id is now material-file-icons. Remove .obsidian/plugins/obsidian-material-icon/ if present, then install into material-file-icons/.

Manual build

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

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
scripts/build-icons.mjs Extract SVGs from material-icon-themesrc/icon-data.ts
styles.css Icon and settings styles

Do not edit src/icon-data.ts by hand. To add custom extension mappings, edit the custom block at the end of scripts/build-icons.mjs, then run npm run build-icons.

Built artifacts main.js and src/icon-data.ts are gitignored; run npm run build after cloning.

Icon matching priority

  1. Custom rules (when enabled)
  2. Exact filename
  3. Longest matching extension
  4. Default file icon

Acknowledgements

File icons are derived from PKief/vscode-material-icon-theme (MIT).

License

MIT