workbench.iconTheme 必须显式设置,否则即使装了图标扩展也看不到任何变化;VSCode 默认禁用所有文件图标,装插件不等于自动生效,90% 的“没图标”问题卡在未启用主题这一步,需通过命令面板执行 Preferences: File Icon Theme 手动选择对应扩展 ID,并确保 settings.json 中正确配置且未被工作区设置覆盖。

workbench.iconTheme 必须显式设置,否则即使装了图标扩展也看不到任何变化。
先确认图标主题是否真正启用
VSCode 默认禁用所有文件图标,装插件 ≠ 自动生效。90% 的“没图标”问题卡在这一步。
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入并执行Preferences: File Icon Theme - 在弹出列表中选中你装的扩展名,例如
vscode-icons或material-icon-theme(注意不是显示名,是扩展 ID) - 如果列表里没有对应项,说明插件未成功安装或被禁用——重装一次,别跳过“启用”按钮
- 改完后建议执行
Developer: Reload Window,仅靠自动刷新有时不触发图标重绘
用 settings.json 强制指定主题,避免被覆盖
图形界面选中的设置可能被工作区级配置、远程开发环境或 Peacock 等插件悄悄覆盖。
- 打开
settings.json(命令面板搜Open Settings (JSON)) - 添加这行(值必须是扩展 ID,大小写和连字符都不能错):
"workbench.iconTheme": "material-icon-theme"或"workbench.iconTheme": "vscode-icons" - 若项目根目录下有
.vscode/settings.json,也要在里面加同样配置,否则它会屏蔽用户级设置 - 不要写成
"workbench.iconTheme": "Material Icon Theme"—— 这是显示名,VSCode 不认
让特定文件(如 .env、pnpm-lock.yaml)显示自定义图标
不同扩展的映射语法完全不同,混用会导致失效;且扩展只认它自己支持的 icon 名。
- 对
vscode-icons:在settings.json里加"vsicons.associations.files",extensions字段写["env"](不是[".env"]),icon值必须是它支持的,比如"gear"、"config",不能写"dotenv" - 对
material-icon-theme:用"material-icon-theme.files.associations",键是完整文件名或带点扩展名,如".env.local"✅,"env.local"❌;值是图标 ID,如"lock"✅,"lock.svg"❌ - 改完保存后,需右键资源管理器空白处 →
Refresh,或重载窗口,否则新映射不加载
图标显示为方块 □ 或模糊?大概率是字体或缩放问题
这不是图标配置错了,而是渲染层缺失符号支持或 DPI 处理异常。
- vscode-icons 等主题大量使用 Nerd Fonts 符号(如 ⚙️、?),系统没装对应字体就会 fallback 成方块
- Windows:下载安装
FiraCode Nerd Font,再在 VSCode 设置里加:"editor.fontFamily": "'FiraCode Nerd Font', Consolas, monospace" - macOS:用
brew install --cask font-fira-code-nerd-font,然后同上配fontFamily - 4K 屏或系统缩放 >125% 时,部分 SVG 图标边缘可能发虚——这不是插件 bug,是 VSCode 渲染限制;临时调低缩放可验证
Preferences: File Icon Theme,否则永远只有文字,没有图标。


















