快速获取常用功能图标：聊天/录音/用户/设置

本文提供 4 个最常用功能图标的获取指南，包含 3 大图标源的推荐名称对照表，让你快速找到并下载所需图标。

核心内容

1. 图标源入口 → 2. 推荐名称对照表 → 3. 下载步骤 → 4. 代码使用

图标源入口

1️⃣ Material Symbols（Google 官方）

地址：fonts.google.com/icons
特点：官方、完整、三种风格（Outlined/Rounded/Sharp）
推荐：Outlined 风格（轮廓线条，清晰简洁）
数量：2500+ 图标

2️⃣ Remix Icon（开源、风格统一）

地址：remixicon.com
检索入口：icones.js.org/collection/ri
特点：可商用、Line/Fill 两套、风格现代
推荐：Line 系列（线性风格）
数量：2800+ 图标

3️⃣ Iconify（聚合 200+ 图标库）

地址：icon-sets.iconify.design
特点：聚合目录、一站式检索、支持多图标集
推荐：适合对比不同图标集的同名图标
数量：200,000+ 图标

功能	Material Symbols	Remix Icon	Iconify 关键字
情景对话	`chat`/`forum`	`chat-3-line`	`chat`/`forum`
录音功能	`mic`	`mic-line`	`mic`/`microphone`
个人中心	`person`	`user-line`	`person`/`user`
设置	`settings`	`settings-3-line`	`settings`/`gear`

下载步骤

方式 1：Material Symbols

步骤：

访问 fonts.google.com/icons
在搜索框输入图标名（如 chat）
点击图标卡片
右侧面板选择 Outlined 风格
点击 Download 按钮
保存 SVG 文件

示例：下载 chat 图标

1. 搜索 "forum"
2. 选择 Outlined 风格
3. 下载 SVG
4. 重命名为 icon_scenario.svg

方式 2：Remix Icon

步骤：

访问 icones.js.org/collection/ri
搜索图标名（如 chat-3）
点击图标
点击 Copy SVG 或 Download
保存为 .svg 文件

示例：下载 mic 图标

1. 搜索 "mic-line"
2. 点击图标
3. 点击 "Download SVG"
4. 保存为 icon_mic.svg

方式 3：Iconify

步骤：

访问 icon-sets.iconify.design
搜索关键字（如 user）
浏览多个图标集的结果
点击喜欢的图标
选择 Download → SVG
保存文件

示例：下载 person 图标

1. 搜索 "user"
2. 对比 Material/Remix/其他图标集
3. 选择喜欢的风格
4. 下载 SVG
5. 保存为 icon_user.svg

资源放置与命名

目录结构

将下载的 SVG 文件放入：

entry/src/main/resources/base/media/

统一命名规范

使用以下命名（全小写 + 下划线）：

icon_scenario.svg      ← chat/forum（情景对话）
icon_mic.svg           ← mic（录音功能）
icon_user.svg          ← user/person（个人中心）
icon_settings.svg      ← settings（设置）

完整目录示例

entry/src/main/resources/
  ├── base/
  │   ├── media/
  │   │   ├── icon_scenario.svg    # 情景对话
  │   │   ├── icon_mic.svg         # 录音功能
  │   │   ├── icon_user.svg        # 个人中心
  │   │   ├── icon_settings.svg    # 设置

代码使用示例

基础用法

typescript

@Entry
@Component
struct IconExample {
  build() {
    Row({ space: 20 }) {
      // 情景对话
      Image($r('app.media.icon_scenario'))
        .width(40)
        .height(40)
        .renderMode(ImageRenderMode.Template)
        .fillColor('#4A90E2')

      // 录音功能
      Image($r('app.media.icon_mic'))
        .width(40)
        .height(40)
        .renderMode(ImageRenderMode.Template)
        .fillColor('#E74C3C')

      // 个人中心
      Image($r('app.media.icon_user'))
        .width(40)
        .height(40)
        .renderMode(ImageRenderMode.Template)
        .fillColor('#2ECC71')

      // 设置
      Image($r('app.media.icon_settings'))
        .width(40)
        .height(40)
        .renderMode(ImageRenderMode.Template)
        .fillColor('#95A5A6')
    }
    .padding(20)
  }
}

完整菜单示例

typescript

import router from '@ohos.router';

interface MenuItem {
  name: string;
  icon: Resource;
  route: string;
  tint?: string;
}

@Entry
@Component
struct HomePage {
  private menuItems: Array<MenuItem> = [
    {
      name: '情景对话',
      icon: $r('app.media.icon_scenario'),  // ← 使用下载的图标
      route: 'pages/ScenarioDialogPage',
      tint: '#4A90E2'
    },
    {
      name: '录音功能',
      icon: $r('app.media.icon_mic'),        // ← 使用下载的图标
      route: 'pages/RecorderPage',
      tint: '#E74C3C'
    },
    {
      name: '个人中心',
      icon: $r('app.media.icon_user'),       // ← 使用下载的图标
      route: 'pages/ProfilePage',
      tint: '#2ECC71'
    },
    {
      name: '设置',
      icon: $r('app.media.icon_settings'),   // ← 使用下载的图标
      route: 'pages/SettingsPage',
      tint: '#95A5A6'
    }
  ];

  @Builder
  MenuCard(item: MenuItem) {
    Column() {
      Image(item.icon)
        .width(80)
        .height(80)
        .renderMode(ImageRenderMode.Template)
        .fillColor(item.tint ?? '#4A90E2')
        .borderRadius(16)
        .backgroundColor('#F5F5F5')

      Text(item.name)
        .fontSize(14)
        .fontColor('#333333')
        .margin({ top: 8 })
    }
    .width(100)
    .height(120)
    .padding(10)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      if (item.route) {
        router.pushUrl({ url: item.route });
      }
    })
  }

  build() {
    Column() {
      Text('首页')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      Grid() {
        ForEach(this.menuItems, (item: MenuItem) => {
          GridItem() {
            this.MenuCard(item)
          }
        })
      }
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .rowsGap(20)
      .columnsGap(20)
      .width('90%')
      .height(300)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}

快速迁移指南

如果你当前使用 Emoji，只需修改 3 处代码即可完成迁移。

改造前（Emoji）

typescript

interface MenuItem {
  name: string;
  icon: string;    // ❌ Emoji 字符串
  route: string;
}

private menuItems: Array<MenuItem> = [
  { name: '情景对话', icon: '💬', route: 'pages/ScenarioDialogPage' },
  { name: '录音功能', icon: '🎙️', route: 'pages/RecorderPage' },
  { name: '个人中心', icon: '👤', route: '' },
  { name: '设置', icon: '⚙️', route: '' }
];

@Builder
MenuCard(item: MenuItem) {
  Column() {
    Text(item.icon)    // ❌ 使用 Text 显示 Emoji
      .fontSize(40)
    Text(item.name)
      .fontSize(14)
  }
}

改造后（SVG）

修改 1：类型定义

typescript

interface MenuItem {
  name: string;
  icon: Resource; // ✅ 改为 Resource
  route: string;
  tint?: string; // ✅ 添加颜色属性
}

修改 2：数据源

typescript

private menuItems: Array<MenuItem> = [
  {
    name: '情景对话',
    icon: $r('app.media.icon_scenario'),  // ✅ 使用资源引用
    route: 'pages/ScenarioDialogPage',
    tint: '#4A90E2'
  },
  {
    name: '录音功能',
    icon: $r('app.media.icon_mic'),       // ✅ 使用资源引用
    route: 'pages/RecorderPage',
    tint: '#E74C3C'
  },
  {
    name: '个人中心',
    icon: $r('app.media.icon_user'),      // ✅ 使用资源引用
    route: '',
    tint: '#2ECC71'
  },
  {
    name: '设置',
    icon: $r('app.media.icon_settings'),  // ✅ 使用资源引用
    route: '',
    tint: '#95A5A6'
  }
];

修改 3：渲染组件

typescript

@Builder
MenuCard(item: MenuItem) {
  Column() {
    // ✅ 改用 Image + 模板渲染
    Image(item.icon)
      .width(80)
      .height(80)
      .renderMode(ImageRenderMode.Template)  // 模板模式
      .fillColor(item.tint ?? '#4A90E2')     // 统一着色

    Text(item.name)
      .fontSize(14)
      .fontColor('#333333')
      .margin({ top: 8 })
  }
  .width(100)
  .height(120)
  .padding(10)
  .onClick(() => {
    if (item.route) {
      router.pushUrl({ url: item.route });
    }
  })
}

优化建议

1. 使用主题色管理

创建主题配置：

typescript

// common/constants/Theme.ets
export class AppTheme {
  static readonly CHAT = "#4A90E2"; // 蓝色 - 聊天
  static readonly RECORD = "#E74C3C"; // 红色 - 录音
  static readonly PROFILE = "#2ECC71"; // 绿色 - 个人
  static readonly SETTINGS = "#95A5A6"; // 灰色 - 设置
}

使用：

typescript

import { AppTheme } from '../common/constants/Theme';

private menuItems: Array<MenuItem> = [
  {
    name: '情景对话',
    icon: $r('app.media.icon_scenario'),
    route: 'pages/ScenarioDialogPage',
    tint: AppTheme.CHAT  // ✅ 使用主题色
  }
];

2. 支持夜间模式

定义颜色资源：

json

// entry/src/main/resources/base/element/color.json
{
  "color": [
    { "name": "icon_chat", "value": "#4A90E2" },
    { "name": "icon_record", "value": "#E74C3C" },
    { "name": "icon_profile", "value": "#2ECC71" },
    { "name": "icon_settings", "value": "#95A5A6" }
  ]
}

// entry/src/main/resources/dark/element/color.json
{
  "color": [
    { "name": "icon_chat", "value": "#64B5F6" },
    { "name": "icon_record", "value": "#EF5350" },
    { "name": "icon_profile", "value": "#66BB6A" },
    { "name": "icon_settings", "value": "#BDBDBD" }
  ]
}

使用：

typescript

private menuItems: Array<MenuItem> = [
  {
    name: '情景对话',
    icon: $r('app.media.icon_scenario'),
    route: 'pages/ScenarioDialogPage',
    tintRes: $r('app.color.icon_chat')  // 自动适配主题
  }
];

// 修改接口定义
interface MenuItem {
  name: string;
  icon: Resource;
  route: string;
  tintRes?: Resource;  // 使用资源引用
}

// 渲染时使用
Image(item.icon)
  .renderMode(ImageRenderMode.Template)
  .fillColor(item.tintRes ?? $r('app.color.icon_primary'))

3. 添加激活状态

typescript

interface MenuItem {
  name: string;
  icon: Resource;
  activeIcon?: Resource;  // 激活态图标（可选）
  route: string;
  tint?: string;
}

@State currentRoute: string = 'pages/ScenarioDialogPage';

@Builder
MenuCard(item: MenuItem) {
  Column() {
    // 根据当前路由选择图标
    Image(this.currentRoute === item.route && item.activeIcon
      ? item.activeIcon
      : item.icon)
      .width(80)
      .height(80)
      .renderMode(ImageRenderMode.Template)
      .fillColor(this.currentRoute === item.route
        ? (item.tint ?? '#4A90E2')
        : '#999999')

    Text(item.name)
      .fontSize(14)
      .fontColor(this.currentRoute === item.route ? '#333333' : '#999999')
      .margin({ top: 8 })
  }
}

常见问题

问题 1：图标名称找不到

解决：

Material Symbols：使用英文关键词（如 chat 而非 聊天）
Remix Icon：注意后缀 -line 或 -fill
Iconify：尝试多个同义词（mic / microphone / record）

问题 2：下载的图标显示不正确

原因： 可能包含多色或渐变

解决：

使用 SVGOMG 优化
统一为纯黑色（fill="#000"）
确保有 viewBox 属性

详见： SVG 图标获取与使用实战

问题 3：不同图标源风格不统一

建议：

✅ 推荐做法：从同一图标库下载所有图标（保持风格一致）
优先级：Remix Icon（风格最统一）→ Material Symbols → Iconify

问题 4：需要更多图标

常用功能图标推荐名称：

功能	Material	Remix	Iconify
搜索	`search`	`search-line`	`search`
通知	`notifications`	`notification-line`	`bell`
收藏	`favorite`	`heart-line`	`heart`
分享	`share`	`share-line`	`share`
删除	`delete`	`delete-bin-line`	`trash`
编辑	`edit`	`edit-line`	`edit`
下载	`download`	`download-line`	`download`
上传	`upload`	`upload-line`	`upload`
主页	`home`	`home-line`	`home`
菜单	`menu`	`menu-line`	`menu`
更多	`more_vert`	`more-line`	`dots-vertical`
返回	`arrow_back`	`arrow-left-line`	`arrow-left`

总结

核心要点

3 大图标源：Material Symbols（官方）、Remix Icon（统一）、Iconify（聚合）
推荐名称：参考对照表，快速找到所需图标
统一命名：icon_[功能].svg（全小写 + 下划线）
资源路径：entry/src/main/resources/base/media/
代码引用：$r('app.media.icon_xxx')
模板渲染：renderMode: Template + fillColor

快速流程

1. 查对照表 → 确定图标名称
   ↓
2. 访问图标源 → 搜索并下载 SVG
   ↓
3. 放入 media/ 目录 → 命名为 icon_xxx.svg
   ↓
4. 代码引用 → $r('app.media.icon_xxx')
   ↓
5. 模板渲染 → Image + renderMode + fillColor

Checklist

□ 确定需要的图标功能
□ 查看对照表，找到推荐名称
□ 访问图标源网站
□ 搜索并下载 SVG 文件
□ 重命名为 icon_xxx.svg
□ 放入 resources/base/media/ 目录
□ 在代码中使用 $r('app.media.icon_xxx')
□ 设置 renderMode 和 fillColor
□ 测试显示效果

下一步学习

相关资源：

批量处理

微任务

谷歌

hybrid

IDFV

快速获取常用功能图标：聊天/录音/用户/设置 ​

核心内容 ​

图标源入口 ​

1️⃣ Material Symbols（Google 官方） ​

2️⃣ Remix Icon（开源、风格统一） ​

3️⃣ Iconify（聚合 200+ 图标库） ​

推荐名称对照表 ​

完整对照表 ​

详细说明 ​

1. 情景对话（聊天） ​

2. 录音功能 ​

3. 个人中心 ​

4. 设置 ​

下载步骤 ​

方式 1：Material Symbols ​

方式 2：Remix Icon ​

方式 3：Iconify ​

资源放置与命名 ​

目录结构 ​

统一命名规范 ​

完整目录示例 ​

代码使用示例 ​

基础用法 ​

完整菜单示例 ​

快速迁移指南 ​

改造前（Emoji） ​

改造后（SVG） ​

优化建议 ​

1. 使用主题色管理 ​

2. 支持夜间模式 ​

3. 添加激活状态 ​

常见问题 ​

问题 1：图标名称找不到 ​

问题 2：下载的图标显示不正确 ​

问题 3：不同图标源风格不统一 ​

问题 4：需要更多图标 ​

总结 ​

核心要点 ​

快速流程 ​

Checklist ​

下一步学习 ​

快速获取常用功能图标：聊天/录音/用户/设置

核心内容

图标源入口

1️⃣ Material Symbols（Google 官方）

2️⃣ Remix Icon（开源、风格统一）

3️⃣ Iconify（聚合 200+ 图标库）

推荐名称对照表

完整对照表

详细说明

1. 情景对话（聊天）

2. 录音功能

3. 个人中心

4. 设置

下载步骤

方式 1：Material Symbols

方式 2：Remix Icon

方式 3：Iconify

资源放置与命名

目录结构

统一命名规范

完整目录示例

代码使用示例

基础用法

完整菜单示例

快速迁移指南

改造前（Emoji）

改造后（SVG）

优化建议

1. 使用主题色管理

2. 支持夜间模式

3. 添加激活状态

常见问题

问题 1：图标名称找不到

问题 2：下载的图标显示不正确

问题 3：不同图标源风格不统一

问题 4：需要更多图标

总结

核心要点

快速流程

Checklist

下一步学习