Flutter Create ElevatedButton with Icon

Flutter comes with a very large number of free Icons for everyone. In flutter there are also Google Icons are inbuild. Means you do not need to import or download any icon if you are using Google Icons. They all are already present inside flutter project SDK. All we have to do is call them. ElevatedButton supports Icons itself using ElevatedButton.icon() widget. The ElevatedButton.icon() widget can make material buttons with material icons present inside it.

List of Icons available in Flutter Icons Class:

1. To see and use Flutter package inbuild Icons Visit HERE.

2. Scroll Down to screen and copy the Icon name to use.

List of Google Icons Inbuilt with Flutter:

1. To use Google Material Icons Visit HERE.

2. Select any Icon and then copy its name to use.

Flutter Create ElevatedButton with Icon:

1. Creating ElevatedButton with Icon.

  ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Download'),
          icon: const Icon(Icons.arrow_drop_down_circle_sharp),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),

Button Screenshot:

2. Creating Button with Contact Us Icon.

   ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Contact Us'),
          icon: const Icon(Icons.assignment_ind),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),

Button Screenshot:

3. Creating Button with Icon shows at the right side of Text.

  Directionality(
            textDirection: TextDirection.rtl,
            child: ElevatedButton.icon(
              onPressed: demo,
              label: const Text('Battery'),
              icon: const Icon(Icons.battery_saver),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.brown,
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                ),
              ),
            )),

Screenshot:

4. Creating Settings Button.

  ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Settings'),
          icon: const Icon(Icons.settings),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),

Screenshot:

5. Creating button with Language Icon.

   ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Language'),
          icon: const Icon(Icons.language),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.teal,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),

Screenshot:

6. Creating Delete button with Icon with Rounded corners.

        ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Delete'),
          icon: const Icon(Icons.delete_forever),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          ),
        ),

Screenshot:

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  demo() {
    print('Icon Button Clicked....');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Column(children: [
        ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Download'),
          icon: const Icon(Icons.arrow_drop_down_circle_sharp),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),
        ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Contact Us'),
          icon: const Icon(Icons.assignment_ind),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),
        Directionality(
            textDirection: TextDirection.rtl,
            child: ElevatedButton.icon(
              onPressed: demo,
              label: const Text('Battery'),
              icon: const Icon(Icons.battery_saver),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.brown,
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                ),
              ),
            )),
        ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Settings'),
          icon: const Icon(Icons.settings),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),
        ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Language'),
          icon: const Icon(Icons.language),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.teal,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
          ),
        ),
        ElevatedButton.icon(
          onPressed: demo,
          label: const Text('Delete'),
          icon: const Icon(Icons.delete_forever),
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            textStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
            ),
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          ),
        ),
      ]),
    ))));
  }
}

Screenshot: