Icon Widget in Flutter

The Icon widget in Flutter displays a graphical icon bundled with IconData. The Icon widget is not interactive, so we don't have any click callbacks.

In this tutorial, we will implement the Icon widget in Flutter and learn to style it. The following are the different properties of the Icon widget which we can use to modify it.

• icon(IconData): It takes the icon to display from IconData. This is a required property.

• size(double): It takes the size of the icon. The default value is 24.0 from default fonts.

• color(Color): It takes the colour of the Icon. If not provided, it takes from the material theme of the application.

• semanticLabel(String): A string is provided to label the Icon.

• textDirection(TextDirection): The text direction to use for rendering the icon. If this is null, the ambient [Directionality] is used instead.

• shadows(List<Shadow>): Here we provide the list of shadows which is applied on the widget.

Syntax

The Icon widget is implemented as follows:

Icon(
  Icons.access_alarm,
  color: Colors.green,
  size: 100,
),

Basic Example

Here we have demonstrated the Icon widget.

main.dart

class IconWidgetTutorial extends StatelessWidget {
  const IconWidgetTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Widget Tutorial'),
      ),
      body: const Center(
        child: Icon(Icons.access_alarm),
      ),
    );
  }
}

Output

Basic Icon Widget

Styling Example

Here we have applied the color and size parameters to apply some styling.

main.dart

class IconWidgetTutorial extends StatelessWidget {
  const IconWidgetTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Widget Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: const <Widget>[
            Icon(
              Icons.access_alarm,
              color: Colors.red,
              size: 50,
            ),
            Icon(
              Icons.access_alarm,
              color: Colors.green,
              size: 100,
            ),
            Icon(
              Icons.access_alarm,
              color: Colors.blue,
              size: 150,
            ),
          ],
        ),
      ),
    );
  }
}

Output

Icon Widget Styling

Shadows

In the following example, we have applied shadows to the Icon widget.

main.dart

class IconWidgetTutorial extends StatelessWidget {
  const IconWidgetTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Widget Tutorial'),
      ),
      body: const Center(
        child: Icon(
          Icons.access_alarm,
          color: Colors.blue,
          size: 150,
          shadows: [
            Shadow(
              color: Colors.black,
              offset: Offset(2, 2),
              blurRadius: 3,
            ),
          ],
        ),
      ),
    );
  }
}

Output

Icon Widget Shadow