App Inventor 2 使用内置 Material 图标字体，免上传快捷展示专业图标

• 三步用上图标
• 注意
• 以前的做法：自己上传字体
• 字体下载

« 返回首页

完整用法（支持的组件、文字与图标混排规则、六个常见场景、数字与英文陷阱、可下载案例）见组件参考里的《图标字体》。

不用找图片、不用上传字体：标签、按钮、复选框等组件的字体直接选「Material 图标字体」，就能显示 2000 多个 Material 图标里的任意一个，还能和文字混排。图标是字体，改颜色、放大都不会模糊。

三步用上图标

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

选好后组件的文字就是图标的英文名（如 shopping_cart），设计器里立刻显示成图标；也可以在文字里接着写普通文字，如 shopping_cart 购物车。之后想换图标，再点字体属性，按「选择图标…」即可。

• 颜色用文字颜色，大小用字体大小；
• 在代码块里改文字就能切换图标，例如收藏按钮在空心和实心之间切换：

global 已收藏 = false

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

注意

• 可以和普通文字混排：文字里正好是图标名的词显示成图标，其余中文、英文、数字照常显示。例如按钮文字写 send 发送，就是一个「图标 + 发送」按钮；Chrome 这种词的一部分碰巧是图标名也不会被转换。反过来，小写的英文单词如果本身就是图标名（如 home、star、add），也会显示成图标；想显示成英文，把首字母大写（Home）即可。
• 名字写错时会原样显示成英文，换一个名字即可；全部英文名可在选择器里搜，也可以到 Google Fonts 图标库 查。
• 字体随应用打包：只有用到图标字体的应用才会带上（约 350KB），伴侣可直接预览。

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

在内置之前，需要下载下面的 MaterialIcons-Regular.ttf，上传到素材，再把组件字体设成它，用法相同。已经这样做的项目不用改，照常可用。

如有疑问，点此参与讨论。

字体下载

最新版：

MaterialIcons-Regular.ttf