[Flutter] How To Use Customize Icon Image

Last Updated on 2021-10-15 by Clay

When we use Flutter for application development, we usually need some icons to used as button. Flutter provide some built-in icons for us, but even so, we still need more customize icons.

You may want to say: I can load and display the picture directly!

Yes, this is a way to do it.

But if we use Flutter's built-in Icon class to handle customize icons, we can even let users decide the icon color, which is convenient.

It is hard to explain in words, just look at the following record.

Use customize icons in Flutter

Step 1: Create icon format that Flutter needs

First, we can go to the FlutterIcon website. In addition to upload your svg images and convert into the Flutter support format, you can also download icons provided by others (please pay attention to license).

The usage method is as shown in the picture below: select icons, and search for the picture you want.

After clicking a picture, the blue DOWNLOAD button will show how many pictures you have selected.

You can select Names in the picture below and rename the pictures.

Step 2: Install and Unzip

After downloading, we need to unzip it.

Step 3: Move the downloaded file to the corresponding location of the project

Move the fonts folder in the project directory; place my_flutter_app_icons.dart in the lib folder.

Step 4: Edit pubspec.yaml

Step 5: Use customize icons

import 'package:flutter/material.dart';
import 'package:flutter_app/my_flutter_app_icons.dart';


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


// MyApp
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}


// _MyAppState
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Icon(
            MyFlutterApp.food,
            color: Colors.purple,
            size: 100,
          ),
        ),
      ),
    );
  }
}

Output:

If I am not mistaken, the icon for this meal is not originally provided in Flutter. Now we can freely call this icon in the project using code.

[Flutter] How To Use Customize Icon Image

Use customize icons in Flutter