# Widgets 05 | Icon

## Before Start

Before starting this tutorial,we should create a page to contain our code. As common, I will create a similar class to write. As follows.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class IconPage extends StatefulWidget {
  @override
  _IconState createState() => _IconState();
}

class _IconState extends State<IconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.ICON),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[],
        ),
      ),
    );
  }
}
```

It shows nothing, but with a title.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWZwDfONgAAirnGSuhC%2F-LW_0ODWu01jD7P8wOyd%2Ficon_01.png?alt=media\&token=72e91cbf-2d11-433b-a195-486fc91073bc)

## Simple Use

The `Icon` is a widget, so you can put inside the `children` list, just as below.

```dart
 Icon(
              Icons.ac_unit,
              size: 100,
              color: RED,
            )
```

The `Icons` is defined by the flutter. If you can find them on their [official website](https://material.io/tools/icons/?style=baseline). You can browse them to choose which one you need. The `Icons.ac_unit`  just use its name, but return `IconData`.Like this.&#x20;

```dart
  static const IconData ac_unit = IconData(0xeb3b, fontFamily: 'MaterialIcons');
```

The `size` set the size of the Icon. The `color` set the color of the Icon.It easy to understand.  And It will show as follows.&#x20;

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWZwDfONgAAirnGSuhC%2F-LW_27gBUEqjKncY55YB%2Ficon_02.png?alt=media\&token=bd6863cc-be57-4cf4-94d3-4d774ac5c3a4)

## Constructor

Let's look at its constructor.

```dart
Icon(this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  })
```

Its parameters are so less and easy. We have used the `icon, size,color` above. Just retain `semanticLabel` and `textDirection`. The `semanticleLabel` is designed to describe the widgets, if you design an app for the blind man, you must consider this, when describing this widget, the phone will speak this string to the user.

## textDirection

So let's just talk this parameter. When we look at its definition. We can see this.

```dart
  final TextDirection textDirection;
```

It is a `TextDirection`, if you look at the fore tutorial, you will be very familiar with this class. It controls the direction of the drawing. It has two choices.

```dart
enum TextDirection {
  /// The text flows from right to left (e.g. Arabic, Hebrew).
  rtl,

  /// The text flows from left to right (e.g., English, French).
  ltr,
}
```

So let's look at an example.

```dart
            Icon(
              Icons.chrome_reader_mode,
              size: 200,
              color: GREEN,
              textDirection: TextDirection.ltr,
            ),
            Icon(
              Icons.chrome_reader_mode,
              size: 200,
              color: BLUE_DEEP,
              textDirection: TextDirection.rtl,
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWZwDfONgAAirnGSuhC%2F-LW_8oikQSXZrTkW2yWC%2Ficon_03.png?alt=media\&token=1db4083f-3f95-40b3-95aa-97b01162e697)

But you should care about that, not every `IconData` in the `Icons` can use this as the same effect. Let's see the definition `Icons.chrome_reader_mode`in the `Icons`.

```dart
  static const IconData chrome_reader_mode = IconData(0xe86d, fontFamily: 'MaterialIcons', matchTextDirection: true);
```

So only the `matchTextDirection = true` can effect when we set the `textDirection` parameter. Let's see an obverse example.

```dart
           Icon(
              Icons.build,
              size: 200,
              color: PURPLE,
              textDirection: TextDirection.ltr,
            ),
            Icon(
              Icons.build,
              size: 200,
              color: BLUE_DEEP,
              textDirection: TextDirection.rtl,
            )
```

We want the second one draw from right to left, but we failed.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWZwDfONgAAirnGSuhC%2F-LW_Aj5CXbyI6FJuW3RY%2Ficon_04.png?alt=media\&token=6b56bcff-4305-4b55-b9ca-545e6165657f)

## Conclusion

The Icon is simple to use, the `textDirection` may be a bit difficult to other parameters. If you don't care about the condition for using the Icons. You may be failed. Good luck

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | QQ Group  |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | 963828159 |