Flutter has a Material icon, but it is still not suitable for China’s national conditions. For example, ICONS commonly used in China, such as wechat, Weibo and QQ, are not included. Or in order to make the APP more personalized, we hope to change the Material style. The solution to Flutter is not too complicated to reference custom solutions. Just follow the following route:

  1. Package the ICONS as TTF files in the project path and modify thempubspec.yamlFiles, such as:
  fonts:
    - family:  MyIcons
      fonts:
       # font file path + file name
       - asset: assets/fonts/MyIcons.ttf    
Copy the code
  1. And then add a.dart file that I like to call font familymy_icons.dart(Note that the file name must conform to the DART code specification), the code reads as follows:
import 'package:flutter/widgets.dart';

class MyIcons {
  CustomIcons._();

  static const _kFontFam = 'MyIcons';
  static const _kFontPkg = null;

  static const IconData weibo = IconData(0xf18a, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData qq = IconData(0xf1d6, fontFamily: _kFontFam, fontPackage: _kFontPkg);
  static const IconData wechat = IconData(0xf1d7, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}
Copy the code

There are two things to note about this code:

  • _kFontFamThis private variable is going to be equal topubspec.yamlthefamilyWith the same name,
  • IconDataThe first parameter is thetacodePointRemember to make sure the icon is consistent with the Unicode code within the font
  1. Here’s an example:
  import './assets/my_icons.dart';

  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Custom Icon Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Login with WeChat'),), body: Center(child: Icon(MyIcons. Wechat),); }}Copy the code

. There’s a much easier way to do it

I’m not talking about Iconfont, which does help us with managing ICONS by project and generating.ttF files, but that’s not enough for Flutter. I’m talking about Fluttericon.com, which, unlike Iconfont, does not require any backend. So if you find it too slow to visit a foreign site, you can download it from Github and deploy it locally. Fluttericon automatically generates.ttF and.dart toolchains from icon sets while preserving Iconfont’s ability to manage icon sets.

New my icon set:

  • Open the website, search in Names or click on the icon to select, The set of ICONS currently available are Material\Font Awesome 5\Entypo\Typicons\Iconic\Modern Pictograms\Meteocons\MFG Labs\Maki\Zocial\Brandico\Elusive\Linecons\Web Symbols\Linearicons Free\Octicons\RPG Awesome, if not, you can upload SVG by yourself
  • After ordering the meal, click Download to Download the zip package, unzip, find the font file and.dartCopy the file to your Flutter project path as described in step 1 abovepubspec.yamlFile, refer to Step 3 reference icon;

Modify my icon set

Fluttericon is a pure front-end website, so how can I retrieve my previous icon set? This requires you to take good care of the downloaded compressed package and upload it to the website again to retrieve and modify your icon set.