How to Show Material Icons in Flutter

Icons are important aspects of mobile app user interface. Material icons are those which follow material design guidelines and they can make your app look more beautiful. In this blog post, let’s look how to add material icons in flutter.

You can show material icons using Icon widget. You can add an icon as follows:

Icon(
  Icons.add,
  color: Colors.pink,
  size: 30.0,
)

In the above snippet add is the icon name. You can go through the list of material icons given here to see the availability. The color property is used to define the color of icon whereas the size property defines the height and width of the icon.

Following is the full Flutter material icon example:

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Material Icon Example'),
        ),
        //calling MyBody class
        body: Center(child:Icon(
        Icons.verified_user,
        color: Colors.teal,
        size: 100.0,
      ),),
      ),
    );
  }
}

The output of flutter material is as given in the screenshot below:

Flutter material icon training

That’s how you display material icons in flutter.

Leave a Comment

Your email address will not be published. Required fields are marked *