mcpField
M
material-design-3-icons

material-design-3-icons

github.com/shelbeely设计与 UI537 次安装36 周前更新
代码仓库

关于 material-design-3-icons

material-design-3-icons 是一项面向界面开发者的技能，提供使用 Material Symbols 实现 Material Design 3 图标的指导。内容涵盖可变字体轴、尺寸、状态表现与无障碍要求。

主要功能

  1. 01Outlined、Rounded、Sharp 三种样式
  2. 02配置四种可变字体轴
  3. 03按光学尺寸调整图标
  4. 04用填充变化表达选中状态
  5. 05提供图标无障碍规范

适用场景

  1. 01为 Material Design 3 界面选择图标样式
  2. 02配置图标尺寸、粗细与填充状态
  3. 03检查独立图标的无障碍标签和触控区域

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shelbeely/shelbeely-agent-skills --skill material-design-3-icons

安装后在 Claude Code 中输入/material-design-3-icons确认已加载。

详细介绍

Material Design 3 图标和 Material Symbols

概述

本技能指导如何使用 Material Symbols 实现 Material Design 3（M3）图标。Material Symbols 是 Google 的可变字体图标系统，提供 2,500 多个图标，并可通过字体变化轴进行动态自定义。

关键词：Material Design 3、M3、图标、Material Symbols、可变字体图标、图标指南、图标无障碍、图标尺寸、实心图标、线框图标

核心原则

图标理念

M3 图标的设计遵循以下原则：

  1. 清晰传达：图标应易于识别且含义广为人知
  2. 动态适配：可变字体技术支持实时自定义
  3. 支持主题：图标适配 M3 的颜色和尺寸系统
  4. 提升无障碍性：对于关键操作，图标应作为文本标签的补充，绝不能替代文本标签
  5. 体现品牌：可调整图标的粗细、填充和样式，以匹配品牌个性

Material Symbols

三种图标样式

Material Symbols 提供三种样式，每种都有独特的视觉特征：

样式特征用途
Outlined简洁、轻盈大多数界面的默认选择
Rounded柔和、友好亲切、随意的场景
Sharp精准、几何技术、专业场景
可变字体轴

Material Symbols 使用四个可变字体轴进行动态自定义：

轴属性范围默认值效果
FILL填充0–10从线框（0）到实心（1）
wght粗细100–700400笔画粗细
GRAD字重等级-25–2000微调粗细而不改变尺寸
opsz光学尺寸20–4824优化不同尺寸下的笔画
实现
加载 Material Symbols

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />


<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />


<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
基本用法
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>
CSS 配置
/* Base icon styles */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}
使用可变字体轴进行自定义
/* Default icon (outlined, regular weight) */
.icon-default {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Filled icon */
.icon-filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Bold icon */
.icon-bold {
  font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24;
}

/* Light icon */
.icon-light {
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

/* Small icon (optimized for 20dp) */
.icon-small {
  font-size: 20px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

/* Large icon (optimized for 48dp) */
.icon-large {
  font-size: 48px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

图标尺寸

标准尺寸

M3 定义了与光学尺寸轴配套的标准图标尺寸：

尺寸用途光学尺寸（opsz）
20dp紧凑布局、小型控件20
24dp默认值，大多数组件24
40dp大型按钮、重点操作40
48dp主视觉图标、空状态48
组件中的尺寸设置
/* Icon in a button */
.md3-button .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'opsz' 20;
}

/* Icon in navigation */
.md3-nav-item .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'opsz' 24;
}

/* Icon in FAB */
.md3-fab .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'opsz' 24;
}

/* Icon in large FAB */
.md3-fab-large .material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: 'opsz' 40;
}

图标颜色

图标使用 M3 颜色令牌，并继承其父元素的颜色：

/* Default icon color */
.icon-default {
  color: var(--md-sys-color-on-surface);
}

/* Icon on primary background */
.icon-on-primary {
  color: var(--md-sys-color-on-primary);
}

/* Icon as interactive element */
.icon-interactive {
  color: var(--md-sys-color-on-surface-variant);
}

.icon-interactive:hover {
  color: var(--md-sys-color-on-surface);
}

/* Active/selected icon */
.icon-active {
  color: var(--md-sys-color-primary);
  font-variation-settings: 'FILL' 1;
}

/* Disabled icon */
.icon-disabled {
  color: var(--md-sys-color-on-surface);
  opacity: 0.38;
}

/* Error icon */
.icon-error {
  color: var(--md-sys-color-error);
}

填充状态过渡

使用填充状态表示选中状态——在空心和实心之间切换：

/* Toggle fill on selection */
.icon-toggle {
  font-variation-settings: 'FILL' 0;
  transition: font-variation-settings 200ms var(--md-sys-motion-easing-standard);
}

.icon-toggle[aria-selected="true"],
.icon-toggle.selected {
  font-variation-settings: 'FILL' 1;
}
常见填充模式
组件未选中已选中
导航图标FILL 0FILL 1
收藏/点赞FILL 0FILL 1，颜色：error
复选框图标FILL 0FILL 1，颜色：primary
书签FILL 0FILL 1
标签页图标FILL 0FILL 1，颜色：primary

使用字重等级突出显示

字重等级可调整粗细而不改变图标尺寸，适合在避免布局偏移的同时突出显示：

/* Low emphasis icon */
.icon-low-emphasis {
  font-variation-settings: 'GRAD' -25;
}

/* High emphasis icon (dark text on light bg) */
.icon-high-emphasis {
  font-variation-settings: 'GRAD' 200;
}

/* Adjust grade for dark mode */
[data-theme="dark"] .material-symbols-outlined {
  font-variation-settings: 'GRAD' -25;
}

无障碍性

要求
  1. 装饰性图标：图标与文本同时使用时，添加 aria-hidden="true"
  2. 独立图标：单独使用图标时，提供 aria-label 或 title
  3. 交互式图标：将图标放在带有无障碍名称的 <button> 中
  4. 触控目标：无论图标的视觉尺寸如何，都应确保触控目标至少为 48×48dp
实现

<button>
  <span class="material-symbols-outlined" aria-hidden="true">delete</span>
  Delete
</button>


<button aria-label="Delete item">
  <span class="material-symbols-outlined" aria-hidden="true">delete</span>
</button>


<span class="material-symbols-outlined" aria-hidden="true">info</span>
<span>More details available</span>
图标按钮的触控目标
.md3-icon-button {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

/* The icon itself can be smaller than the touch target */
.md3-icon-button .material-symbols-outlined {
  font-size: 24px;
}

最佳实践

推荐做法
  1. ✅ 使用 Material Symbols，保持 M3 图标样式一致
  2. ✅ 使图标粗细与周围的排版粗细匹配
  3. ✅ 根据图标的实际渲染尺寸选择合适的光学尺寸（opsz）
  4. ✅ 使用填充状态过渡表示选中状态
  5. ✅ 为独立的交互式图标提供无障碍标签
  6. ✅ 与文本搭配的装饰性图标使用 aria-hidden="true"
  7. ✅ 在深色模式下调整字重等级（略微设为负值，以获得更好的对比度）
  8. ✅ 使用 M3 颜色令牌设置图标颜色
禁止事项
  1. ❌ 主要导航或关键操作的图标不能不带文字标签
  2. ❌ 不要在同一界面中混用不同风格的 Material Symbols（outlined、rounded、sharp）
  3. ❌ 不要使用 CSS transform: scale() 调整图标大小——应使用 font-size 和 opsz
  4. ❌ 不要在同一界面中使用不一致的字重
  5. ❌ 不要仅依靠图标颜色传达状态
  6. ❌ 不要使用小于 20 dp 的图标
  7. ❌ 不要忽略图标按钮的触控目标尺寸要求

图标实现检查清单

实现 M3 图标时，请确保：

  • 已加载 Material Symbols 字体（outlined、rounded 或 sharp——选用一种）
  • 已配置可变字体轴（FILL、wght、GRAD、opsz）
  • 光学尺寸与渲染尺寸匹配（20 dp → opsz 20、24 dp → opsz 24，依此类推）
  • 图标字重与周围文本的字重匹配
  • 导航和切换开关中的填充状态转换能体现选中状态
  • 已针对深色模式调整字阶
  • 所有独立图标都有无障碍标签（aria-label）
  • 装饰性图标使用 aria-hidden="true"
  • 交互式图标包含在适当的交互元素中（button、a）
  • 图标按钮的触控目标至少为 48×48 dp
  • 图标使用 M3 颜色令牌（on-surface、primary、error 等）
  • 整个界面只使用一种图标风格
  • 在需要清晰表达的场景，为图标补充文字标签

资源

评论

支持 Markdown