material-symbols-v3

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Material Symbols v3

Material Design 3 icon system using variable fonts. This project uses Material Symbols Outlined loaded from Google Fonts CDN.

基于可变字体的Material Design 3图标系统。本项目使用从Google Fonts CDN加载的Material Symbols Outlined。

Related Skills

Project Setup

项目设置

Location:

css/styles/icons.css

css

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

位置:

css/styles/icons.css

css

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

Self-Hosting (Offline)

本地托管（离线使用）

For offline/production without CDN:

Download from fonts.google.com/icons
Place in
```
/fonts/material-symbols-outlined.woff2
```
Replace CDN import:

css

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
}

如需离线/生产环境不依赖CDN：

从fonts.google.com/icons下载
将文件放置在
```
/fonts/material-symbols-outlined.woff2
```
替换CDN导入代码：

css

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
}

Basic Usage

基础用法

html

<span class="icon">home</span>
<span class="icon">settings</span>
<span class="icon">favorite</span>

Use the icon name from Material Symbols as text content.

html

<span class="icon">home</span>
<span class="icon">settings</span>
<span class="icon">favorite</span>

使用Material Symbols中的图标名称作为文本内容。

Icon Sizes

图标尺寸

Class	Size	Optical Size	Use Case
`.icon--sm`	20px	20	Dense UI, inline text
`.icon--md`	24px	24	Default, buttons
`.icon--lg`	40px	40	Emphasis, headers
`.icon--xl`	48px	48	Hero sections

html

<span class="icon icon--sm">info</span>
<span class="icon icon--md">info</span>
<span class="icon icon--lg">info</span>
<span class="icon icon--xl">info</span>

类名	尺寸	光学尺寸	使用场景
`.icon--sm`	20px	20	紧凑UI、行内文本
`.icon--md`	24px	24	默认、按钮
`.icon--lg`	40px	40	强调元素、页眉
`.icon--xl`	48px	48	英雄区块

html

<span class="icon icon--sm">info</span>
<span class="icon icon--md">info</span>
<span class="icon icon--lg">info</span>
<span class="icon icon--xl">info</span>

Fluid Sizing with Utopia

结合Utopia实现流体尺寸

For icons that scale with typography:

css

.icon-fluid {
  font-size: var(--step-1);
  --icon-optical-size: 24;
}

如需图标随字体大小缩放：

css

.icon-fluid {
  font-size: var(--step-1);
  --icon-optical-size: 24;
}

Variable Font Axes

可变字体轴

Material Symbols is a variable font with 4 axes:

Axis	Range	Default	Purpose
`FILL`	0–1	0	Outlined (0) vs filled (1)
`wght`	100–700	400	Stroke weight
`GRAD`	-25–200	0	Fine thickness adjustment
`opsz`	20–48	24	Optical size optimization

Material Symbols是一款可变字体，包含4个轴：

轴	范围	默认值	用途
`FILL`	0–1	0	轮廓样式(0) 与填充样式(1)
`wght`	100–700	400	描边粗细
`GRAD`	-25–200	0	精细厚度调整
`opsz`	20–48	24	光学尺寸优化

Fill Styles

填充样式

html

<span class="icon icon--outlined">favorite</span>  <!-- Outline (default) -->
<span class="icon icon--filled">favorite</span>    <!-- Filled -->

html

<span class="icon icon--outlined">favorite</span>  <!-- 轮廓样式（默认） -->
<span class="icon icon--filled">favorite</span>    <!-- 填充样式 -->

Weight Variants

字重变体

html

<span class="icon icon--thin">home</span>     <!-- 100 -->
<span class="icon icon--light">home</span>    <!-- 300 -->
<span class="icon icon--regular">home</span>  <!-- 400 (default) -->
<span class="icon icon--medium">home</span>   <!-- 500 -->
<span class="icon icon--bold">home</span>     <!-- 700 -->

html

<span class="icon icon--thin">home</span>     <!-- 100 -->
<span class="icon icon--light">home</span>    <!-- 300 -->
<span class="icon icon--regular">home</span>  <!-- 400（默认） -->
<span class="icon icon--medium">home</span>   <!-- 500 -->
<span class="icon icon--bold">home</span>     <!-- 700 -->

Grade Variants

粗细等级变体

html

<span class="icon icon--grade-low">home</span>    <!-- -25: thinner on dark bg -->
<span class="icon icon--grade-normal">home</span> <!-- 0 (default) -->
<span class="icon icon--grade-high">home</span>   <!-- 200: bolder emphasis -->

html

<span class="icon icon--grade-low">home</span>    <!-- -25: 深色背景下更细 -->
<span class="icon icon--grade-normal">home</span> <!-- 0（默认） -->
<span class="icon icon--grade-high">home</span>   <!-- 200: 更粗以强调 -->

Custom Variation

自定义变体

css

.custom-icon {
  --icon-fill: 1;
  --icon-weight: 600;
  --icon-grade: 0;
  --icon-optical-size: 24;
}

css

.custom-icon {
  --icon-fill: 1;
  --icon-weight: 600;
  --icon-grade: 0;
  --icon-optical-size: 24;
}

Icon Colors

图标颜色

Semantic Colors

语义化颜色

html

<span class="icon icon--primary">check_circle</span>
<span class="icon icon--secondary">info</span>
<span class="icon icon--disabled">block</span>

html

<span class="icon icon--primary">check_circle</span>
<span class="icon icon--secondary">info</span>
<span class="icon icon--disabled">block</span>

Inherit from Parent

继承父元素颜色

css

.icon {
  color: inherit;  /* Default behavior */
}

.btn-primary .icon {
  color: var(--theme-on-primary);
}

css

.icon {
  color: inherit;  /* 默认行为 */
}

.btn-primary .icon {
  color: var(--theme-on-primary);
}

State Colors

状态颜色

css

.icon-success { color: var(--color-success); }
.icon-error { color: var(--color-error); }
.icon-warning { color: var(--color-warning); }

css

.icon-success { color: var(--color-success); }
.icon-error { color: var(--color-error); }
.icon-warning { color: var(--color-warning); }

Interactive Icons

交互式图标

html

<span class="icon icon--interactive">settings</span>

css

.icon--interactive {
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.icon--interactive:hover {
  color: var(--icon-color-primary);
  transform: scale(1.1);
}

.icon--interactive:active {
  transform: scale(0.95);
}

html

<span class="icon icon--interactive">settings</span>

css

.icon--interactive {
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.icon--interactive:hover {
  color: var(--icon-color-primary);
  transform: scale(1.1);
}

.icon--interactive:active {
  transform: scale(0.95);
}

Button Patterns

按钮模式

Icon + Text Button

图标+文本按钮

html

<button class="btn">
  <span class="icon" aria-hidden="true">add</span>
  <span>Add Item</span>
</button>

css

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

html

<button class="btn">
  <span class="icon" aria-hidden="true">add</span>
  <span>添加项目</span>
</button>

css

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

Icon-Only Button

纯图标按钮

html

<button class="btn-icon" aria-label="Settings">
  <span class="icon" aria-hidden="true">settings</span>
</button>

css

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  padding: var(--space-xs);
}

html

<button class="btn-icon" aria-label="设置">
  <span class="icon" aria-hidden="true">settings</span>
</button>

css

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  padding: var(--space-xs);
}

Trailing Icon

后置图标

html

<button class="btn">
  <span>Next</span>
  <span class="icon" aria-hidden="true">arrow_forward</span>
</button>

html

<button class="btn">
  <span>下一步</span>
  <span class="icon" aria-hidden="true">arrow_forward</span>
</button>

Accessibility

无障碍访问

Decorative Icons (with visible label)

装饰性图标（带可见标签）

html

<button>
  <span class="icon" aria-hidden="true">save</span>
  Save
</button>

html

<button>
  <span class="icon" aria-hidden="true">save</span>
  保存
</button>

Meaningful Icons (icon-only)

表意图标（纯图标）

html

<button aria-label="Close dialog">
  <span class="icon" aria-hidden="true">close</span>
</button>

html

<button aria-label="关闭对话框">
  <span class="icon" aria-hidden="true">close</span>
</button>

Screen Reader Text

屏幕阅读器文本

html

<button class="btn-icon">
  <span class="icon" aria-hidden="true">delete</span>
  <span class="sr-only">Delete item</span>
</button>

html

<button class="btn-icon">
  <span class="icon" aria-hidden="true">delete</span>
  <span class="sr-only">删除项目</span>
</button>

High Contrast Mode

高对比度模式

css

@media (forced-colors: active) {
  .icon {
    forced-color-adjust: auto;
  }
}

css

@media (forced-colors: active) {
  .icon {
    forced-color-adjust: auto;
  }
}

Common Icons Reference

常用图标参考

Navigation

导航类

Icon	Name	Usage
home	`home`	Home/main
menu	`menu`	Hamburger menu
arrow_back	`arrow_back`	Back navigation
arrow_forward	`arrow_forward`	Forward/next
close	`close`	Close/dismiss

图标	名称	用途
home	`home`	首页/主页面
menu	`menu`	汉堡菜单
arrow_back	`arrow_back`	返回导航
arrow_forward	`arrow_forward`	前进/下一步
close	`close`	关闭/取消

Actions

操作类

Icon	Name	Usage
add	`add`	Create new
edit	`edit`	Edit/modify
delete	`delete`	Remove
save	`save`	Save
search	`search`	Search

图标	名称	用途
add	`add`	创建新内容
edit	`edit`	编辑/修改
delete	`delete`	删除
save	`save`	保存
search	`search`	搜索

Status

状态类

Icon	Name	Usage
check_circle	`check_circle`	Success/complete
error	`error`	Error state
warning	`warning`	Warning
info	`info`	Information
help	`help`	Help

图标	名称	用途
check_circle	`check_circle`	成功/完成
error	`error`	错误状态
warning	`warning`	警告
info	`info`	信息提示
help	`help`	帮助

Media

媒体类

Icon	Name	Usage
play_arrow	`play_arrow`	Play
pause	`pause`	Pause
volume_up	`volume_up`	Sound on
volume_off	`volume_off`	Sound off

图标	名称	用途
play_arrow	`play_arrow`	播放
pause	`pause`	暂停
volume_up	`volume_up`	开启声音
volume_off	`volume_off`	关闭声音

Settings

设置类

Icon	Name	Usage
settings	`settings`	Settings
tune	`tune`	Adjustments
brightness_6	`brightness_6`	Theme toggle
lock	`lock`	Locked/secure

Browse all icons: fonts.google.com/icons

图标	名称	用途
settings	`settings`	设置
tune	`tune`	调整
brightness_6	`brightness_6`	主题切换
lock	`lock`	锁定/安全

浏览所有图标: fonts.google.com/icons

Animation

动画

With Anime.js

使用Anime.js

javascript

import { animate } from 'animejs';

// Wiggle
animate(iconEl, {
  rotate: [0, -10, 10, -10, 10, 0],
  duration: 300,
  ease: 'easeOutQuad'
});

// Bounce
animate(iconEl, {
  scale: [1, 1.2, 1],
  duration: 200,
  ease: 'easeOutBack'
});

javascript

import { animate } from 'animejs';

// 摇摆动画
animate(iconEl, {
  rotate: [0, -10, 10, -10, 10, 0],
  duration: 300,
  ease: 'easeOutQuad'
});

// 弹跳动画
animate(iconEl, {
  scale: [1, 1.2, 1],
  duration: 200,
  ease: 'easeOutBack'
});

CSS Transitions

CSS过渡动画

css

.icon {
  transition: transform 0.15s ease;
}

.btn:hover .icon {
  transform: scale(1.1);
}

.btn:active .icon {
  transform: scale(0.95);
}

css

.icon {
  transition: transform 0.15s ease;
}

.btn:hover .icon {
  transform: scale(1.1);
}

.btn:active .icon {
  transform: scale(0.95);
}

Web Component Wrapper

Web组件封装

javascript

class MIcon extends HTMLElement {
  static observedAttributes = ['name', 'size', 'filled'];

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const name = this.getAttribute('name') || 'help';
    const size = this.getAttribute('size') || 'md';
    const filled = this.hasAttribute('filled');

    this.innerHTML = `<span class="icon icon--${size}${filled ? ' icon--filled' : ''}" aria-hidden="true">${name}</span>`;
  }
}

customElements.define('m-icon', MIcon);

Usage:

html

<m-icon name="home"></m-icon>
<m-icon name="favorite" filled size="lg"></m-icon>

javascript

class MIcon extends HTMLElement {
  static observedAttributes = ['name', 'size', 'filled'];

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const name = this.getAttribute('name') || 'help';
    const size = this.getAttribute('size') || 'md';
    const filled = this.hasAttribute('filled');

    this.innerHTML = `<span class="icon icon--${size}${filled ? ' icon--filled' : ''}" aria-hidden="true">${name}</span>`;
  }
}

customElements.define('m-icon', MIcon);

用法:

html

<m-icon name="home"></m-icon>
<m-icon name="favorite" filled size="lg"></m-icon>

CSS Custom Properties

CSS自定义属性

css

:root {
  /* Font */
  --icon-font: 'Material Symbols Outlined';

  /* Sizes */
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 40px;
  --icon-size-xl: 48px;

  /* Variable font axes */
  --icon-fill: 0;
  --icon-weight: 400;
  --icon-grade: 0;
  --icon-optical-size: 24;

  /* Colors */
  --icon-color: var(--color-on-surface);
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-on-surface-variant);
  --icon-color-disabled: var(--color-outline);
}

css

:root {
  /* 字体 */
  --icon-font: 'Material Symbols Outlined';

  /* 尺寸 */
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 40px;
  --icon-size-xl: 48px;

  /* 可变字体轴 */
  --icon-fill: 0;
  --icon-weight: 400;
  --icon-grade: 0;
  --icon-optical-size: 24;

  /* 颜色 */
  --icon-color: var(--color-on-surface);
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-on-surface-variant);
  --icon-color-disabled: var(--color-outline);
}

Migration from Emoji

从Emoji迁移

Replace emoji icons with Material Symbols:

Old (Emoji)	New (Material Symbol)
`<span aria-hidden="true">📖</span>`	`<span class="icon" aria-hidden="true">menu_book</span>`
`<span aria-hidden="true">⚙️</span>`	`<span class="icon" aria-hidden="true">settings</span>`
`<span aria-hidden="true">🏠</span>`	`<span class="icon" aria-hidden="true">home</span>`
`<span aria-hidden="true">⭐</span>`	`<span class="icon" aria-hidden="true">star</span>`
`<span aria-hidden="true">🔒</span>`	`<span class="icon" aria-hidden="true">lock</span>`
`<span aria-hidden="true">🔊</span>`	`<span class="icon" aria-hidden="true">volume_up</span>`
`<span aria-hidden="true">🔇</span>`	`<span class="icon" aria-hidden="true">volume_off</span>`
`<span aria-hidden="true">✓</span>`	`<span class="icon" aria-hidden="true">check</span>`

将Emoji图标替换为Material Symbols:

旧版（Emoji）	新版（Material Symbol）
`<span aria-hidden="true">📖</span>`	`<span class="icon" aria-hidden="true">menu_book</span>`
`<span aria-hidden="true">⚙️</span>`	`<span class="icon" aria-hidden="true">settings</span>`
`<span aria-hidden="true">🏠</span>`	`<span class="icon" aria-hidden="true">home</span>`
`<span aria-hidden="true">⭐</span>`	`<span class="icon" aria-hidden="true">star</span>`
`<span aria-hidden="true">🔒</span>`	`<span class="icon" aria-hidden="true">lock</span>`
`<span aria-hidden="true">🔊</span>`	`<span class="icon" aria-hidden="true">volume_up</span>`
`<span aria-hidden="true">🔇</span>`	`<span class="icon" aria-hidden="true">volume_off</span>`
`<span aria-hidden="true">✓</span>`	`<span class="icon" aria-hidden="true">check</span>`

Files

文件

```
css/styles/icons.css
```
- Icon system styles and CSS custom properties

```
css/styles/icons.css
```
- 图标系统样式和CSS自定义属性

material-symbols-v3

Original

Translation

Material Symbols v3

Material Symbols v3

Related Skills

相关技能

Project Setup

项目设置

Self-Hosting (Offline)

本地托管（离线使用）

Basic Usage

基础用法

Icon Sizes

图标尺寸

Fluid Sizing with Utopia

结合Utopia实现流体尺寸

Variable Font Axes

可变字体轴

Fill Styles

填充样式

Weight Variants

字重变体

Grade Variants

粗细等级变体

Custom Variation

自定义变体

Icon Colors

图标颜色

Semantic Colors

语义化颜色

Inherit from Parent

继承父元素颜色

State Colors

状态颜色

Interactive Icons

交互式图标

Button Patterns

按钮模式

Icon + Text Button

图标+文本按钮

Icon-Only Button

纯图标按钮

Trailing Icon

后置图标

Accessibility

无障碍访问

Decorative Icons (with visible label)

装饰性图标（带可见标签）

Meaningful Icons (icon-only)

表意图标（纯图标）

Screen Reader Text

屏幕阅读器文本

High Contrast Mode

高对比度模式

Common Icons Reference

常用图标参考

Navigation

导航类

Actions

操作类

Status

状态类

Media

媒体类

Settings

设置类

Animation

动画

With Anime.js

使用Anime.js

CSS Transitions

CSS过渡动画

Web Component Wrapper

Web组件封装

CSS Custom Properties

CSS自定义属性

Migration from Emoji

从Emoji迁移

Files