使用说明
MDI图标MCP服务器
AI助手的Material Design Icons自动下载服务器。查找图标名称，获取SVG代码，并自定义颜色和大小。
特性
- 🔍 图标名称查找 -按关键字搜索，得到一个真实的、保证存在的图标名称列表，供AI选择
- 📥 SVG下载 -下载具有自定义颜色和大小的图标
- ⚡ 自动缓存 -初始负载后快速响应
- 🎨 可定制的 -支持颜色和尺寸参数
可用工具
mdi_reresolve_icon
查找与关键字匹配的所有有效MDI图标名称。AI从返回的列表中选择最合适的一个。
当您需要为以下框架提供图标名称字符串时，请使用此工具 @mdi/js, @mdi/reactVuetify、Flutter MDI软件包等。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
keyword |
string | required | English关键字--返回包含此术语的所有图标名称 |
limit |
number | 200 | 最大结果数 |
答复：
| 字段 | 类型 | 描述 |
|---|---|---|
names |
string[] | 所有匹配的烤肉串大小写图标名称（保证存在——为您的代码选择一个） |
total |
number | 找到的匹配图标总数 |
mdi_get_icon
获取MDI图标SVG代码，用于需要渲染图标图像的用例。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name |
string | required | 烤肉串中的图标名称（例如。， account-circle) |
size |
number | 24 | 图标大小（像素） |
color |
string | currentColor | 图标颜色（任何CSS颜色值） |
AI工作流
1. Call mdi_resolve_icon("account")
→ Returns ["account", "account-circle", "account-outline", ...]
2. AI picks the best match based on intent
→ e.g., "account-circle"
3a. Only need the name? Write code directly:
import { mdiAccountCircle } from '@mdi/js'
3b. Need SVG? Call mdi_get_icon("account-circle", 24, "#fff")
→ Returns full SVG code
⚠️ 人工智能永远不应该猜测或发明图标名称。总是打电话
mdi_resolve_icon首先，从返回的列表中选择。
在AI工具中的使用
光标
将配置添加到 .cursor/mcp.json:
{
"mdi-icons-mcp": {
"command": "node",
"args": ["/path/to/mdi-icons-mcp/dist/index.js"],
"type": "stdio"
}
}
根据您的项目位置调整路径。
继续（VS代码/JetBrains）
添加 .continue/config.json:
{
"models": [
{
"name": "claude-sonnet",
"provider": "anthropic"
}
],
"tools": [
{
"name": "mdi-icons-mcp",
"command": "node",
"args": ["/path/to/mdi-icons-mcp/dist/index.js"],
"transport": "stdio"
}
]
}
克劳德桌面版
在中配置 ~/.config/claude/claude_desktop_config.json:
{
"mcpServers": {
"mdi-icons-mcp": {
"command": "node",
"args": ["/absolute/path/to/mdi-icons-mcp/dist/index.js"]
}
}
}
房间代码（VS代码）
在设置中配置或 roo.json:
{
"mcpServers": {
"mdi-icons-mcp": {
"command": "node",
"args": ["./mdi-icons-mcp/dist/index.js"]
}
}
}
通过npx
直接从npm使用mdi图标mcp，而无需克隆存储库：
{
"mdi-icons-mcp": {
"command": "npx",
"args": [
"-y",
"mdi-icons-mcp@latest"
],
"type": "stdio"
}
}
用法示例
查找图标名称（用于框架代码）
User: Find a "person outline" icon for use in Vuetify
AI: Calls mdi_resolve_icon("account-outline")
Returns: ["account-outline", "account-circle-outline", "account-box-outline", ...]
AI picks "account-outline" and uses it in Vuetify:
<v-icon>mdi-account-outline</v-icon>
获取SVG代码
User: Get account icon, white color, 80px
AI: Calls mdi_get_icon("account", 80, "white")
Returns SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="80" viewBox="0 0 24 24">
<path fill="white" d="M12,4A4,4..." />
</svg>
安装与运行
需求
- Node.js 18+
- pnpm（推荐）或npm/yarn
安装
# Clone the project
git clone https://github.com/BrotherPeng/mdi-icons-mcp.git
cd mdi-icons-mcp
# Install dependencies
pnpm install
# Build the project
pnpm build
开发模式
pnpm dev
项目结构
mdi-icons-mcp/
├── src/
│ ├── index.ts # MCP server entry point
│ ├── tools/
│ │ ├── resolveIcon.ts # Icon name lookup tool
│ │ └── getIcon.ts # SVG download tool
│ └── utils/
│ └── cache.ts # Icon cache management
├── icons.json # MDI icon list cache
├── package.json
└── README.md
可用图标
支持7000多种材质设计图标。完整列表位于 网站名称：materialdesignicons.com.
常见问题解答
Q： 图标名称的格式是什么？
A： 所有名字都是 kebab-case 英语。， home, account-circle, arrow-left.使用 mdi_resolve_icon 查找名字——无需死记硬背。
Q： 如何在@mdi/js中使用图标名称？
A： 图标名称 account-circle 地图到 mdiAccountCircle 在JS（camelCase与 mdi 前缀）。
Q： 如何在Vuetify中使用图标名称？
A： 使用 mdi- 前缀： <v-icon>mdi-account-circle</v-icon>.
Q： 支持哪些颜色？
A： 所有CSS颜色值： white, #FF5733, rgb(255, 87, 51)等等。（适用于 mdi_get_icon 仅）。
Q： 出现“未找到图标”错误？
A： 使用 mdi_resolve_icon 要先查找正确的图标名称，然后调用 mdi_get_icon.
许可证
麻省理工学院
