vscode material icon theme

其他源码 2025-08-22

.VSCODE/EXTENSIONS文件夹。

在我们的示例中,我们将它们放入.vScode/Extensions文件夹内部的图标文件夹中:

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

在settings.json(仅用户设置!)中,文件夹图标可以与这样的文件夹名称(例如“ src”)关联:

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

自定义文件夹图标克隆

也可以克隆现有文件夹图标并更改其颜色以创建可以与文件夹名称关联的新图标。以下示例显示了如何克隆管理文件夹图标:

 "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 " ]
  }
]

这将创建两个称为用户admin和角色admin的新图标,分别与文件夹名称和角色相关联。基本属性定义了应该克隆的图标(在这种情况下为管理文件夹图标)。颜色属性定义了新图标的颜色。 LightColor属性是可选的,并在视觉工作室代码以浅色主题运行时定义了图标的颜色。 foldernames属性定义了应与新图标关联的文件夹名称。 rootfoldernames属性定义了应与新图标关联的根文件夹名称。

  • 尽管您可以使用任何#RRGGBB颜色来获得颜色和浅色属性,但是如果您想坚持使用材料调色板中的颜色,则可以查看MiteralPalette.ts中允许的别名的完整列表。
  • 您可以查看将用作foldericons.ts中的基础的可用图标的完整列表。

根文件夹关联

您可以为工作区的根文件夹自定义图标。如果您想为项目中的主文件夹一个独特的图标,这将很有帮助。

要将图标(例如服务器文件夹图标)分配给根文件夹(例如后端),请使用以下配置:

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

自定义根文件夹图标颜色

要更改根文件夹图标的颜色,请添加此设置:

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

语言关联

使用以下配置,您可以自定义语言图标。也可以覆盖现有的关联。

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

您可以在上面的概述中看到可用的图标名称。有关语言ID的允许值列表,请参见VS代码文档中的“已知语言标识符”。

自定义语言图标克隆

也可以克隆现有的语言图标并更改其颜色,以创建可以与语言ID相关联的新图标。以下示例显示了如何克隆自动键语言图标:

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

这将创建一个称为Ahk-Clone的新图标,分别与语言ID AHK2相关联。基本属性定义了应该克隆的图标(在这种情况下为Autohotkey语言图标)。颜色属性定义了新图标的颜色。 LightColor属性是可选的,并在视觉工作室代码以浅色主题运行时定义了图标的颜色。 IDS属性定义了应与新图标关联的语言ID。

  • 尽管您可以使用任何#RRGGBB颜色来获得颜色和浅色属性,但是如果您想坚持使用材料调色板中的颜色,则可以查看MiteralPalette.ts中允许的别名的完整列表。
  • 您可以查看将用作FileCons.ts中的基础的可用图标的完整列表。

命令

按CTRL-SHIFT-P打开命令调色板并键入材料图标。

命令列表

命令描述
激活图标主题激活图标主题。
更改文件颜色更改文件图标的颜色。
更改文件夹颜色更改文件夹图标的颜色。
更改文件夹主题更改文件夹图标的设计。
改变不透明度更改图标的不透明度。
更改根文件夹颜色更改根文件夹图标的颜色。
改变饱和更改图标的饱和值。
配置图标包选择一个启用其他图标的图标包(例如,Angular,React,NGRX)。
还原默认配置重置为默认配置。
切换Explorer箭头显示或隐藏文件夹图标旁边的箭头。
切换灰度将图标饱和度设置为0(灰度)或1(颜色)。

图标来源

  • 材料设计图标
  • 物质符号

贡献者

感谢我们所有出色的贡献者!您的支持有助于使每个人都更好。

贡献

我们欢迎各种贡献!无论您是要添加新图标,改进文档,修复错误还是在翻译方面的帮助,您的输入都将受到赞赏。

如何参与:

  • 阅读有关我们的编码标准,图标设计技巧和工作流程的贡献指南

  • ?报告问题发现了一个错误还是有图标请求?打开一个问题。

  • 提交准备贡献代码或图标的拉请请求?创建拉动请求。

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

相关扩展

  • Github的物质图标
  • 材料产品图标
  • 材料图标NPM软件包


享受物质图标主题?通过主演或成为赞助商来支持该项目!

下载源码

通过命令行克隆项目:

git clone https://github.com/material-extensions/vscode-material-icon-theme.git