共计 1680 个字符，预计需要花费 5 分钟才能阅读完成。
官方 Icon
Flutter 本身自带了 MaterialDesign 的图标集，在 pubspec.yaml 中有如下配置
…
flutter:
users-material-design: true
…
通过以上配置，就可以在代码中引用任何 MD 的官方图标 (需翻墙)。这些图片都定义在了 IconDatas 中。
Icon(Icons.favorite)
第三方 Icon
第三方图标库和 MD 的图片库在使用上没有区别，但需要手动引入和配置路径。为了方便复用，我们可以把图标制作为一个第三方库来调用。例如：
…
import ‘package:my_icon/my_icon.dart’;
…
Icon icon = Icon(MyIcon.zhihu); # 知乎 LOGO
制作 Icon 库
1. 制作 ttf 文件
一般我们会在 iconfont.cn 上去寻找合适的图标集或自行绘制，完成后打包下载，压缩包里有制作好的 ttf 文件。
2. 编写配置文件
作为示例，在 /lib 目录下创建一个名为 my_font 的文件夹，文件夹中的 pubspec.yaml 内容如下：
name: my_font
description: The font for my application
author: Lynx <lynx86@126.com>
homepage: http://www.a-lightyear.com/
version: 1.0.0
environment:
sdk: “>=2.0.0-dev.28.0 <3.0.0”
dependencies:
flutter:
sdk: flutter
dev_dependencies:
recase: “^2.0.0+1”
flutter:
fonts:
– family: MyIcon
fonts:
– asset: lib/fonts/iconfont.ttf
weight: 400
从配置文件看出，iconfont 下载的 ttf 文件放在 /lib/my_font/lib/fonts/ 下面，该路径可以自行设置。
3. 编写库文件
library font_social_flutter;
import ‘package:flutter/widgets.dart’;
class MyIcon {
static const IconData zhihu = const _MyIconData(0xe6a2);
static const IconData wechat = const _MyIconData(0xe697);
static const IconData alipay = const _MyIconData(0xe698);
static const IconData weibo = const _MyIconData(0xe6ab);
static const IconData wechat_friends = const _MyIconData(0xe6ae);
static const IconData qq = const _MyIconData(0xe6ac);
}
class _MyIconData extends IconData {
const _MyIconData(int codePoint)
: super(
codePoint,
fontFamily: ‘MyIcon’,
fontPackage: ‘my_icon’,
);
}
这里的 0xe6a2 即为每个 Icon 的 unicode 字符。在 iconfont 下载包里有一个 html 文件，打开后可以看到每个图片的 unicode 值。
使用 Icon
引入 Icon 库
在使用之前，需要把该库引入到当前 flutter 工程中。编辑 flutter 项目的 pubspec.yaml，添加如下内容：
…
dependencies:
flutter:
sdk: flutter
…
my_icon:
path: lib/my_icon/ # 在这里引入第三方 icon 库
…
…
使用 Icon
如开篇所述，在做好以上准备工作后，即可以如 MD 图标一般方便的引入自制的图标集。
…
import ‘package:my_icon/my_icon.dart’;
…
Icon icon = Icon(MyIcon.zhihu); # 知乎 LOGO
