用途:为按钮、导航、状态指示及各类 UI 元素添加 Material Design 3 图标,支持 2500+ 图标。
主要能力:使用可变字体,含 FILL(0–1)、wght(100–700)、GRAD(-25–200)、opsz(20–48)四个轴,可调整填充、字重、粗细与光学尺寸;提供 sm/md/lg/xl 尺寸类及与排版联动的流式尺寸;支持语义颜色、状态颜色、交互悬停动画、图标+文字/纯图标/尾随图标按钮模式,以及可访问性标注(aria-hidden、aria-label、sr-only)与高对比模式。
使用方式:默认从 Google Fonts CDN 引入;离线时下载 woff2 并改用 @font-face 指向 /fonts/material-symbols-outlined.woff2。以 span 承载图标名文本(如 home、settings),配合 .icon 及修饰类(如 icon--filled、icon--bold、icon--lg)使用;可用 CSS 变量自定义各轴。另可封装为 Web Component 或配合 Anime.js 制作动画。
适用场景:需要统一图标风格的界面、离线生产构建、将 emoji 迁移为矢量图标等。
限制:需自行下载字体文件以实现离线;具体图标名与可用性以 fonts.google.com/icons 为准;其他价格、平台支持等信息暂未提供。