Material Icon Theme

适用于 Visual Studio Code 的 Material Design 图标

喜欢 Material Icon Theme 吗？给项目点个星标或成为赞助者来支持我们吧！

文件图标

🏞️ 查看所有可用文件图标

文件夹图标

🏞️ 查看所有可用文件夹图标

目录

• 功能特点
• 快速开始
• 自定义设置
• 命令说明
• 图标来源
• 贡献者
• 贡献指南
• 相关扩展

功能特点

• 适用于 VS Code 的 Material Design 文件和文件夹图标
• 可自定义颜色、不透明度和饱和度
• 支持图标包和主题
• 自定义图标关联和克隆
• 易于使用、设计现代且持续维护

快速开始

1. 安装扩展
   

2. 激活图标主题
   打开命令面板（Windows/Linux 为 Ctrl+Shift+P，macOS 为 Cmd+Shift+P），输入 Material Icons: Activate Icon Theme 并选择该命令。

3. 享受新图标
   您的编辑器现在将显示美观且可自定义的 Material Design 文件和文件夹图标。

自定义设置

您可以通过调整颜色、图标样式、不透明度等选项来个性化 Material Icon Theme 的外观，以匹配您的偏好或工作流程。

自定义文件和文件夹颜色

您可以使用命令面板更改默认文件和文件夹图标的颜色：

或者通过用户设置进行调整：

"material-icon-theme.folders.color": "#ef5350",
"material-icon-theme.files.color": "#42a5f5",

文件夹主题

您可以通过命令面板更改文件夹图标的设计：

或者通过用户设置：

"material-icon-theme.folders.theme": "specific"

自定义图标不透明度

你可以为图标设置自定义不透明度：

"material-icon-theme.opacity": 0.5

自定义图标饱和度

如果您对颜色不满意，可以通过调整饱和度来降低图标的色彩浓度，使其呈现偏灰色调；若将饱和度设为 0，图标则会完全变为灰度效果：

"material-icon-theme.saturation": 0.5

你也可以通过将 切换灰度 设置为开启来实现无饱和度（即灰度）效果。

自定义图标关联

你可以直接在用户设置中自定义图标关联。

文件关联

使用 *.[扩展名] 模式可以定义自定义文件图标关联。例如，你可以为 *.sample 定义一个图标，这样所有以 .sample 结尾的文件都会显示该图标。不过，并非所有具有相同文件扩展名的文件都始终使用相同的图标。对于某些特定的文件名，会有专门的图标。如果要同时覆盖所有特定的文件图标，则必须使用两个星号代替一个星号，即 **.[扩展名]。

如果没有前导 *，则会自动将其配置为文件名，而非文件扩展名。

"material-icon-theme.files.associations": {
    "*.ts": "typescript",
    "**.json": "json",
    "fileName.ts": "angular"
}

自定义 SVG 图标

可以通过添加相对于扩展程序 dist 文件夹的 SVG 文件路径来添加自定义图标。不过，有一个限制条件，即存放自定义图标的目录必须位于用户目录下 .vscode 文件夹的 extensions 目录内。

例如，一个名为 sample.svg 的自定义 SVG 文件可以放在 VS Code 的 extensions 文件夹内的 icons 文件夹中：

.vscode
 ┗ extensions
   ┗ icons
     ┗ sample.svg

在 settings.json（仅用户设置！）中，可以像这样将图标与文件名或文件扩展名相关联：

"material-icon-theme.files.associations": {
    "fileName.ts": "../../icons/sample"
}

注意：自定义文件名必须在设置中配置，且不带文件后缀 .svg，如上面的示例所示。

自定义文件图标克隆

您还可以克隆现有的文件图标并更改其颜色，以创建可与文件名或文件扩展名关联的新图标。以下示例展示了如何克隆 rust 图标：

"material-icon-theme.files.customClones": [
  {
    "name": "rust-mod",
    "base": "rust",
    "color": "blue-400",
    "fileNames": ["mod.rs"]
  },
  {
    "name": "rust-lib",
    "base": "rust",
    "color": "light-green-300",
    "lightColor": "light-green-600",
    "fileNames": ["lib.rs"]
  }
]

这将创建两个名为 rust-mod 和 rust-lib 的新图标，分别与文件名 mod.rs 和 lib.rs 相关联。base 属性定义应克隆的图标（在本例中为 rust 图标）。color 属性定义新图标的颜色。lightColor 属性是可选的，用于定义 Visual Studio Code 在浅色主题下运行时图标的颜色。fileNames 属性定义应与新图标关联的文件名。还有一个 fileExtensions 属性，可用于将新图标与文件扩展名关联（"fileExtensions": ["ext", "ext2"]）。

• 尽管 color 和 lightColor 属性可以使用任何 #RRGGBB 颜色，但如果希望使用 Material 调色板中的颜色，可以在 materialPalette.ts 中查看允许的完整别名列表。
• 可以在 fileIcons.ts 中查看可用作 base 的完整图标列表。

文件夹关联

以下配置可以自定义文件夹图标。也可以覆盖现有关联并创建良好的组合。例如，你可以将文件夹主题更改为“classic”，并仅为你喜欢的文件夹名称定义图标。

"material-icon-theme.folders.associations": {
    "customFolderName": "src",
    "sample": "dist"
}

自定义 SVG 文件夹图标

与文件类似，也可以为文件夹图标引用您自己的 SVG 图标。这里需要提供两个 SVG 文件：一个用于文件夹关闭状态，另一个用于文件夹打开状态。我们将这两个文件命名为 “folder-sample.svg” 和 “folder-sample-open.svg”，它们必须放置在相对于扩展 dist 文件夹的目录中。此目录必须位于 .vscode/extensions 文件夹内的某个位置。

在我们的示例中，我们将它们放置在 .vscode/extensions 文件夹内的 icons 文件夹中：

.vscode
 ┗ extensions
   ┗ icons
     ┣ folder-sample.svg
     ┗ folder-sample-open.svg

在 settings.json（仅用户设置！）中，可以将文件夹图标与文件夹名称（例如 “src”）关联，如下所示：

"material-icon-theme.folders.associations": {
    "src": "../../../../icons/folder-sample"
}

自定义文件夹图标克隆

您还可以克隆现有的文件夹图标并更改其颜色，以创建可与文件夹名称关联的新图标。以下示例展示了如何克隆 admin 文件夹图标：

"material-icon-theme.folders.customClones": [
  {
    "name": "users-admin",
    "base": "admin",
    "color": "light-green-500",
    "lightColor": "light-green-700",
    "folderNames": ["users"],
    "rootFolderNames": ["users"]
  },
  {
    "name": "roles-admin",
    "base": "admin",
    "color": "purple-400",
    "folderNames": ["roles"],
    "rootFolderNames": ["users"]
  }
]

这将创建两个新图标，分别名为 users-admin 和 roles-admin，它们将分别与文件夹名称 users 和 roles 相关联。base 属性定义了要克隆的图标（在本例中为 admin 文件夹图标）。color 属性定义新图标的颜色。lightColor 属性是可选的，用于定义 Visual Studio Code 在亮色主题下运行时图标的颜色。folderNames 属性定义了应与新图标关联的文件夹名称。rootFolderNames 属性定义了应与新图标关联的根文件夹名称。

• 尽管您可以为 color 和 lightColor 属性使用任何 #RRGGBB 颜色，但如果您希望使用 Material 调色板中的颜色，可以在 materialPalette.ts 中查看允许使用的所有别名列表。
• 您可以在 folderIcons.ts 中查看可用作 base 的所有图标列表。

根文件夹关联

您可以自定义工作区根文件夹的图标。如果您希望项目中的主文件夹有一个独特的图标，这将非常有用。

要将某个图标（例如服务器文件夹图标）分配给根文件夹（例如 backend），请使用以下配置：

"material-icon-theme.rootFolders.associations": {
  "backend": "server"
}

自定义根文件夹图标颜色

若要更改根文件夹图标的颜色，请添加以下设置：

"material-icon-theme.rootFolders.color": "#F4511E"

语言关联

通过以下配置，您可以自定义语言图标。也可以覆盖现有的关联设置。

"material-icon-theme.languages.associations": {
  "languageId": "iconName",
  "json": "json"
}

您可以在上方的概览中查看可用的图标名称。有关 languageId 的允许值列表，请参阅 VS Code 文档中的“已知语言标识符”。

自定义语言图标克隆

您还可以克隆现有的语言图标并更改其颜色，以创建可与语言 ID 关联的新图标。以下示例展示了如何克隆 autohotkey 语言图标：

"material-icon-theme.languages.customClones": [
  {
    "name": "ahk-clone",
    "base": "autohotkey",
    "color": "blue-400",
    "lightColor": "grey-600",
    "ids": ["ahk2"]
  }
]

这将创建一个名为 ahk-clone 的新图标，它分别与语言 ID ahk2 相关联。base 属性定义了要克隆的图标（在本例中为 autohotkey 语言图标）。color 属性定义新图标的颜色。lightColor 属性是可选的，用于定义 Visual Studio Code 在亮色主题下运行时图标的颜色。ids 属性定义了应与新图标关联的语言 ID。

• 尽管您可以为 color 和 lightColor 属性使用任何 #RRGGBB 颜色，但如果您希望使用 Material 调色板中的颜色，可以在 materialPalette.ts 中查看允许的完整别名列表。
• 您可以在 fileIcons.ts 中查看可用作 base 的完整图标列表。

命令

按 Ctrl-Shift-P 打开命令面板，然后输入 Material Icons。

命令列表

命令	描述
Activate Icon Theme	激活图标主题。
Change File Color	更改文件图标的颜色。
Change Folder Color	更改文件夹图标的颜色。
Change Folder Theme	更改文件夹图标的设计。
Change Opacity	更改图标的不透明度。
Change Root Folder Color	更改根文件夹图标的颜色。
Change Saturation	更改图标的饱和度值。
Configure Icon Packs	选择一个图标包，以启用其他图标（例如，Angular、React、Ngrx 的图标）。
Restore Default Configuration	重置为默认配置。
Toggle Explorer Arrows	显示或隐藏文件夹图标旁的箭头。
Toggle Grayscale	将图标饱和度设置为 0（灰度）或 1（彩色）。

图标来源

• Material Design Icons
• Material Symbols

贡献者

感谢所有出色的贡献者！ 您的支持让 Material Icon Theme 能够为所有人提供更好的体验。

参与贡献

我们欢迎各种形式的贡献！无论您想添加新图标、改进文档、修复错误，还是协助翻译，您的投入都将受到重视。

参与方式：

• 📖 阅读 贡献指南 了解我们的编码标准、图标设计技巧和工作流程。

• 🐛 报告问题 发现错误或有图标需求？提交 issue。

• 💡 提交拉取请求 准备好贡献代码或图标了吗？创建拉取请求。

• 🌍 协助翻译 通过编辑 src/core/i18n/translations/ 和 package.nls.*.json 中的文件来改进或添加翻译。

相关扩展

• Material Icons for GitHub
• Material Product Icons
• Material Icons NPM Package

---

喜欢 Material Icon Theme 吗？请为项目点赞或成为赞助者来支持我们！