• 图标字体
  • 哪些组件能用
  • 三步用上
  • 颜色、大小与代码块里换图标
  • 文本 + 图标混合
    • 混排规则
    • 场景一：带文字的图标按钮
    • 场景二：状态提示随状态换图标
    • 场景三：图标 + 动态数字（点赞数、未读数）
    • 场景四：复选框、开关前加图标
    • 场景五：列表显示框做图标菜单
    • 场景六：英文和图标写在一起
  • 完整 .aia 案例
  • 常见问题
  • 平台说明
  • 以前的做法：自己上传字体

« 返回组件参考

图标字体

不用找图片、不用上传字体：标签、按钮等组件的字体属性选「Material 图标字体」，文字里写图标的英文名（如 home、shopping_cart），就显示成对应的图标。内置 2000 多个 Google Material 图标。

图标本质是文字，所以：

• 颜色用组件的「文本颜色」，大小用「字体大小」，放大不模糊；
• 能和中文混排：send 发送 显示成「图标 + 发送」，一个按钮就能做出带图标的按钮；
• 在代码块里改文字就能换图标，不用准备多张图片；
• 安卓与鸿蒙都支持，伴侣里直接预览；编译时只有用到图标字体的应用才打包这个字体（约 350KB）。

哪些组件能用

三步用上

1. 拖一个标签（或按钮）到屏幕；
2. 点它的字体属性，选「Material 图标字体」，确定后自动弹出图标选择器；
3. 在选择器里按分类找，或直接搜中文、英文（如 购物车、返回、home），单击选中、双击使用。

选好后组件的文字就是图标的英文名（如 shopping_cart），设计器里立刻显示成图标。想加说明文字，在后面接着写：shopping_cart 购物车。之后要换图标，再点字体属性，按「选择图标…」。

跑起来看：标签显示一个购物车图标，后面跟着「购物车」三个字；把「文本颜色」改成红色、「字体大小」改成 30，图标和文字一起变红变大。

颜色、大小与代码块里换图标

• 图标颜色 = 文本颜色，图标大小 = 字体大小，和文字一样设置；
• 换图标就是改文字。例如收藏按钮在空心和实心之间切换（按钮字体选图标字体，文字初始为 favorite_border）：

global 已收藏 = false

when 按钮_收藏.Click() {
  已收藏 = not 已收藏
  if 已收藏 {
    按钮_收藏.Text = "favorite"
  } else {
    按钮_收藏.Text = "favorite_border"
  }
}

跑起来看：点一下变成实心的心，再点一下变回空心。

文本 + 图标混合

混排规则

字体选了图标字体后，组件的文字仍用系统字体显示，只把其中正好是图标名的整词换成图标。「词」指连续的英文字母、数字和下划线；中文、空格、标点都会把词隔开。

最后两行是混排最容易踩的坑，下面的场景三、场景六专门讲怎么避开。

场景一：带文字的图标按钮

顶栏的「返回」按钮、聊天里的「发送」按钮，最常见的写法是一个按钮里写 图标名 + 空格 + 中文：

• 返回按钮：字体选图标字体，文字 arrow_back 返回；
• 标题：标签字体选图标字体，文字 settings 设置；
• 发送按钮：文字 send 发送。

不需要任何代码块。图标和中文用同一个文本颜色、字体大小；想让图标大、文字小，就拆成两个组件放进水平布局。

场景二：状态提示随状态换图标

网络、蓝牙、电量这类状态，图标和文字一起换，一眼就能看懂。标签字体选图标字体：

global 已连接 = true

when 按钮_切换网络.Click() {
  已连接 = not 已连接
  if 已连接 {
    标签_网络.Text = "wifi 已连接"
    标签_网络.TextColor = &HFF2E7D32
  } else {
    标签_网络.Text = "wifi_off 未连接"
    标签_网络.TextColor = &HFFBF360C
  }
}

跑起来看：标签在「绿色 Wi-Fi 图标 + 已连接」和「红色断开图标 + 未连接」之间切换。

常用的状态图标：wifi / wifi_off、bluetooth / bluetooth_disabled、battery_full / battery_alert、lock / lock_open、visibility / visibility_off、check_circle / error。

场景三：图标 + 动态数字（点赞数、未读数）

数字会变的场景，不要把数字和图标写进同一个用了图标字体的组件：点赞数恰好变成 123 或 360 时，这个数字本身就是图标名，会突然显示成一个图标。

正确做法是图标一个组件、数字一个组件，放进同一个水平布局：

• 按钮_点赞：字体选图标字体，文字 favorite_border，文本颜色红色；
• 标签_点赞数：字体保持默认，文字 122。

global 已点赞 = false
global 点赞数 = 122

when 按钮_点赞.Click() {
  已点赞 = not 已点赞
  if 已点赞 {
    按钮_点赞.Text = "favorite"
    点赞数 = 点赞数 + 1
  } else {
    按钮_点赞.Text = "favorite_border"
    点赞数 = 点赞数 - 1
  }
  标签_点赞数.Text = 点赞数
}

跑起来看：点一下，心变实心，数字从 122 变成 123，正常显示成数字；再点一下回到空心和 122。如果把数字也拼进按钮文字（favorite 123），123 会变成一个图标。

场景四：复选框、开关前加图标

复选框和开关的文字同样可以混排。深色模式开关：复选框字体选图标字体，文字 dark_mode 深色模式：

when 复选框_深色.Changed() {
  if 复选框_深色.Checked {
    复选框_深色.Text = "light_mode 浅色模式"
    Screen1.BackgroundColor = &HFF263238
  } else {
    复选框_深色.Text = "dark_mode 深色模式"
    Screen1.BackgroundColor = &HFFF6F8FC
  }
}

跑起来看：勾选后背景变深，复选框变成「太阳图标 + 浅色模式」；取消勾选恢复。

场景五：列表显示框做图标菜单

列表显示框的字体选图标字体，元素里每项写 图标名 + 中文，就是一个带图标的菜单。「列表项字体」（副文字的字体）可以保持默认，副文字里的英文和数字就不会被误转。

设计器里把「元素字串」设为 home 首页,shopping_cart 购物车,person 我的,help 帮助，再放一个字体选了图标字体的标签：

when 列表显示框_菜单.AfterPicking() {
  标签_状态.Text = join("check_circle 你点了：", 列表显示框_菜单.Selection)
}

跑起来看：列表四行，每行一个图标 + 中文；点「购物车」，标签显示「对勾图标 你点了：购物车图标 购物车」——选中项本身带着图标名，交给同样用图标字体的标签就原样显示成图标。

场景六：英文和图标写在一起

图标字体的组件里也要写英文时，记住规则表最后两行：小写英文单词如果本身是图标名（list、code、image、start、map、help、home、star……），会被换成图标。

• 写英文时首字母大写：Home、Star、List 不会转换；
• 或者英文放在另一个默认字体的组件里；
• 用户输入的内容、从网络取回的文字也一样：先显示到默认字体的组件，别直接塞进用了图标字体的组件。

完整 .aia 案例

下载 .aia 源码

一个屏幕把上面的场景放在一起：顶栏「返回 + 设置」、网络状态切换、点赞按钮 + 独立的点赞数、深色模式复选框、图标菜单列表，以及一行首字母大写的英文。导入方法：项目 → 导入项目（.aia）→ 选择下载的 .aia 文件。

验证范围：最终归档通过正式编辑器首次载入与保存重开（0 错误）、后台导入、安卓安装包编译、鸿蒙 HAP 编译；本页混排规则表与各场景里「哪些词会变图标」逐条在鸿蒙图标转换上实测通过。图标的实际显示效果尚未在真机上逐一截图核对。

常见问题

平台说明

• 安卓与鸿蒙规则一致：整词、小写、正好是图标名才转换，其余文字用系统字体正常显示；
• 字体随应用打包，伴侣自带，不需要上传任何素材；
• 全部图标名可在图标选择器里按中文搜，也可以到 Google Fonts 图标库 查英文名（用 Material Icons 这一套）。

以前的做法：自己上传字体

内置之前，需要下载 MaterialIcons-Regular.ttf 上传到素材，再把组件字体设成它，详见《使用 Material 图标字体》。已经这样做的项目照常可用；新项目直接用内置的图标字体即可。