Material Icon Theme

Visual Studio Code 的 Material Design 图标

喜欢 Material Icon Theme 吗？通过给它加星或成为赞助者来支持该项目！

文件图标

🏞️ 显示所有可用的文件图标

文件夹图标

🏞️ 显示所有可用的文件夹图标

功能

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

入门

安装扩展
激活图标主题
打开命令面板（macOS 上为 Ctrl+Shift+P 或 Cmd+Shift+P），输入 Material Icons: Activate Icon Theme，然后选择它。
享受您的新图标
您的编辑器现在将为文件和文件夹显示美观且可自定义的 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

你还可以通过将 Toggle Grayscale 设置为 ON 来实现无饱和（即灰度）。

自定义图标关联

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

文件关联

使用 *.[extension] 模式，你可以定义自定义的文件图标关联。例如，你可以为 *.sample 定义一个图标，并且所有以 .sample 结尾的文件都将使用该定义的图标。然而，并非所有具有相同文件扩展名的文件总是拥有相同的图标。对于某些特定的文件名，存在特殊的图标。为了覆盖所有这些特定的文件图标，必须设置两个星号而不是一个，即 **.[extension]。

如果没有前导的 *，它将被自动配置为文件名，而不是文件扩展名。

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

自定义 SVG 图标

可以通过添加指向 SVG 文件的路径来添加自定义图标，该文件位于相对于扩展的 dist 文件夹的位置。但是，有一个限制条件，即自定义图标所在的目录必须位于用户目录中 .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 颜色，但如果你想坚持使用材质调色板中的颜色，可以在 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 颜色，但如果你想坚持使用材质调色板中的颜色，可以在 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 颜色，但如果你想坚持使用材质调色板中的颜色，可以在 materialPalette.ts 中查看允许的别名完整列表。
你可以在 fileIcons.ts 中查看可用于 base 的可用图标完整列表。

Commands

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

命令列表

Command	Description
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	显示或隐藏文件夹图标旁边的箭头。
切换灰度	将图标饱和度设置为 `0`（灰度）或 `1`（彩色）。

图标来源

贡献者

感谢所有出色的贡献者！您的支持让 Material Icon Theme 对每个人来说都变得更好。

贡献

我们欢迎各种形式的贡献！无论您是想添加新图标、改进文档、修复错误，还是协助翻译，您的参与都备受赞赏。

如何参与：

📖 阅读贡献指南 了解我们的编码标准、图标设计技巧和工作流程。
🐛 报告问题 发现错误或有一个图标请求？提交一个 issue。
💡 提交 Pull Request 准备好贡献代码或图标了吗？创建一个 pull request。
🌍 协助翻译 通过编辑 src/core/i18n/translations/ 和 package.nls.*.json 中的文件来改进或添加翻译。