Material Icon Theme 的 folders.associations 是唯一可靠入口,严格按文件夹名字符串键值映射,不支持路径、正则或根目录保留字;需用固定文件夹名(如"my-app")匹配内置图标ID(如"folder-root"),并确保工作区设置未覆盖,修改后执行 Developer: Reload Window。

Material Icon Theme 的 folders.associations 是唯一可靠入口
VSCode 本身不支持直接给“根目录文件夹”设图标,所有所谓“自定义根文件夹图标”的实际路径,都落在 material-icon-theme.folders.associations 这个配置项上。它不是 CSS 选择器,也不是文件系统路径匹配,而是严格按**文件夹名字符串**做键值映射。
常见错误是写成 "./src"、"src/" 或正则表达式——全无效。只接受纯文件夹名或通配符(如 "src"、"node_modules"、"*test*")。
-
"src"→ 匹配任何叫src的文件夹,无论嵌套多深 -
"*config*"→ 匹配config、my-config、configs -
"."或"./"→ 不生效,根目录无法用此方式捕获
根目录文件夹图标只能靠“命名约定”间接实现
VSCode 没有 rootFolder 或 workspaceRoot 这类保留字图标映射。想让工作区根目录显示特定图标,唯一办法是:把你的项目根文件夹起一个固定名字,比如 my-app,然后在 settings.json 中配:
"material-icon-theme.folders.associations": {
"my-app": "folder-root"
}
这个 "folder-root" 必须是 Material Icon Theme 实际支持的图标 ID。查法:打开插件安装目录下的 node_modules/material-icon-theme/icons/iconDefinitions.json,搜索 "folder-root" —— 它存在,且对应一个带小星标的文件夹图标。
- 别写
"root"、"workspace"或"project",这些 ID 不存在 - 若你用多根工作区,每个根文件夹名必须单独映射,不能批量匹配
- 改完保存后执行
Developer: Reload Window,不要只重启终端
工作区设置会覆盖用户设置,根目录图标失效的主因在此
你在用户级 settings.json 里配好了 folders.associations,但打开某个项目后图标又变回默认——大概率是该目录下 .vscode/settings.json 里写了 "workbench.iconTheme": null 或压根没继承父配置。
检查方法:
- 右下角状态栏点击齿轮图标,看是否显示
Workspace Settings - 打开该工作区的
.vscode/settings.json,确认里面也写了完整的material-icon-theme.folders.associations - 如果该文件里有
"workbench.iconTheme": "null"或"material-icon-theme.folders.associations": {},删掉或补全
远程开发(SSH/Dev Container)下,工作区设置默认只读,需手动复制到远程 .vscode/settings.json 才生效。
别碰 iconDefinitions 自定义 SVG,除非你发扩展
有人尝试在 settings.json 里写 "iconDefinitions" 或引用本地 SVG 路径,这不会生效。VSCode 的 workbench.iconTheme 只接受已注册图标的 ID 字符串,不支持运行时注入 SVG。
真正能自定义 SVG 图标的方式只有一种:自己写一个图标主题扩展,把 SVG 放进 icons/ 目录,通过 package.json 的 contributes.icons 注册,再在 iconDefinitions.json 里绑定 ID。但这和“在 settings.json 里改几行”完全不是一个量级的工作。
对绝大多数人来说,folders.associations + 现有图标 ID 就是边界。想让根目录图标与众不同,最务实的做法是统一项目命名 + 固定图标 ID 映射,而不是试图绕过 VSCode 的图标主题机制。


















