How to add Icon/Icon Button in Flutter

In this example, we are going to show you how to add icons to your Flutter app. You will also learn to change the size, color, or icon as well as to add icon buttons, and make the default icon clickable in your Flutter App. See the examples below:

Icon(Icons.print)

You can use Icon() widget to add icons to your Flutter App. You have to pass the icon data as an icon to this widget. You can use default available Material icons with Icons class.

Read This Aso: How to Use Font Awesome Icons in Flutter App

Icon(Icons.message,
    size: 50, 
    color: Colors.red
)

To resize the icon size and change the icon color, you have to pass the size and color value along with icon data to Icon() widget.

InkWell(
  child: Icon(Icons.link),
  onTap: (){
      //action code when clicked
      print("The icon is clicked");
  },
)

You can wrap Icon() widget with InkWell or alternatively GestureDetector() widget to make icons clickable in your Flutter app.

IconButton(
  onPressed: (){
      //action coe when button is pressed
  }, 
  icon: Icon(Icons.send),
)

You can use IconButton() widget to add the Icon button in your flutter app.

ElevatedButton.icon(
  onPressed: (){

  }, 
  icon: Icon(Icons.phone), 
  label: Text("Elevated Button")
)

You can use ElevatedButton.icon() widget to add icon to your Elevated button.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}


class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Add Icon in Flutter"),
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            alignment: Alignment.center,
             child: Column(
               children:[
                   
                  //add default icon
                  Icon(Icons.print),

                  //resize and add color to icon
                  Icon(Icons.message,
                      size: 50, 
                      color: Colors.red
                  ),

                  //make Icon Clickable
                  InkWell(
                    child: Icon(Icons.link),
                    onTap: (){
                        //action code when clicked
                        print("The icon is clicked");
                    },
                  ),

                  //add Icon Button
                  IconButton(
                    onPressed: (){
                        //action coe when button is pressed
                    }, 
                    icon: Icon(Icons.send),
                  ),

                  //add elevated button with icon
                  ElevatedButton.icon(
                    onPressed: (){

                    }, 
                    icon: Icon(Icons.phone), 
                    label: Text("Elevated Button")
                  ),  
                   
               ]
             ),
          )
       );
  }
}

In this example, we have added icons in different ways, such as plain icon, clickable icon, button with icon, elevated button with icon.