1、优势

Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。

效果如下图：

控制不同颜色和大小的icon

• 在Flutter开发中，iconfont和图片相比有如下优势：

1.体积小：可以减小安装包大小。
2.矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
3.可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
4.可以通过TextSpan和文本混用。

2、原理

在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。而在iconfont中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。

3、 使用字体库图标

Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下

（默认配置就有）

flutter:
  uses-material-design: true

Material Design所有图标可以在其官网查看：https://material.io/tools/icons/

1. 我们看一个简单的例子：

           String icons = "";
           icons += "\uE914";
           icons += " \uE000";
           icons += " \uE90D";
           Text(
             icons,
             style: TextStyle(
                 fontFamily: "MaterialIcons",
                 fontSize: 24.0,
                 color: Colors.green),
           ),

• 完整代码如下

      import 'package:flutter/material.dart';
      class TextDemo extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          String icons = "";
          icons += "\uE914";
          icons += " \uE000";
          icons += " \uE90D";
      
          return new Scaffold(
            appBar: new AppBar(
              title: new Text("图标控件"),
            ),
            body: new Column(
              children: <Widget>[
                Text(
                  icons,
                  style: TextStyle(
                      fontFamily: "MaterialIcons",
                      fontSize: 24.0,
                      color: Colors.green),
                ),
              ],
            ),
          );
        }
      }
      
      void main() {
        runApp(new MaterialApp(
          title: "图标案例",
          theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
          home: new TextDemo(),
        ));
      }

• 运行效果如下图所示：

由此可见，iconfont可以像文字一样被设置大小和颜色。

但是，像"uE914"、" uE000"、" uE90D"这样的图标码并不易懂，也不好记。所以，Flutter封装了IconData和Icon来专门显示字体图标。

1. 上面的例子也可以用如下方式实现：

         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Icon(
               Icons.accessible,
               color: Colors.red,
               size: 30.0,
             ),
             Icon(
               Icons.error,
               color: Colors.yellow,
               size: 30.0,
             ),
             Icon(
               Icons.fingerprint,
               color: Colors.blue,
               size: 30.0,
             ),
           ],
         )

• 效果图如下：

注：Icons类中包含了所有Material Design图标的IconData静态变量定义。

4、使用自定义字体图标（以导入阿里图库为例）

我们也可以使用自定义字体图标，下面我们来展示如何使用第三方字体库。

1. 下载图标

到阿里图库挑选合适的图标，加入购物车之后，点击下载代码。

1. 取出.ttf文件

解压代码包，将iconfont.ttf文件取出。

1. 导入iconfont.ttf文件

假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"。
那么我们需要在pubspec.yaml文件中添加如下代码：

fonts:
  - family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

1. 为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量：

     import 'package:flutter/widgets.dart';
   
     class MyIcons {
       // 草莓
       static const IconData strawberry =
       const IconData(0xe605, fontFamily: 'myIcon');
   
       // 冰棒
       static const IconData iceLolly =
       const IconData(0xe60b, fontFamily: 'myIcon', matchTextDirection: true);
   
       // 甜甜圈
       static const IconData donut =
       const IconData(0xe606, fontFamily: 'myIcon', matchTextDirection: true);
     }

2. 使用

         Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Icon(
               MyIcons.strawberry,
               color: Colors.red[400],
             ),
             Icon(
               MyIcons.iceLolly,
               color: Colors.green,
             ),
             Icon(
               MyIcons.donut,
               color: Colors.pink[300],
             ),
           ],
         )

   运行后效果如下图所示：
   注意：该效果只能在手机上显示，模拟器无法显示。

导入第三方字体库效果图

本文参考：《Flutter中文网》