How to use an image instead of an icon in flutter?

Question

I am currently doing something like this

new Tab(icon: new Icon(Icons.arrow_forward), text: "Browse"),

However I would like to use an image as an icon . I get images using

new Image.asset("assets/img/logo.png"),

My question is how can i use that image as an icon in my tab shown above ?

score 58 · Accepted Answer · edited Aug 02 '23 at 07:51

58

As per documentation Tab icon property ask a widget so you can pass like this also or any other widget also

new Tab(icon: new Image.asset("assets/img/logo.png"), text: "Browse"),

edited Aug 02 '23 at 07:51

BookwormKevin

5
3

answered May 06 '18 at 11:07

Robin Sinha

1,082
1
10
12

2

Is there a way to style say with and height of the icon @RobinSinha – griffins Jul 26 '19 at 06:23
The argument type 'Image' can't be assigned to the parameter type 'Icon?'. – Mahmoud Samy Jul 20 '23 at 19:00
SideMenuItem( priority: 0, title: 'Dashboard', onTap: (index, _) { sideMenu.changePage(index); }, icon: new Image.asset("assets/img/logo.png"), badgeContent: const Text( '3', style: TextStyle(color: Colors.white), ), ), – Mahmoud Samy Jul 20 '23 at 19:00
what should i do? – Mahmoud Samy Jul 20 '23 at 19:00

score 21 · Answer 2 · answered Jan 24 '22 at 13:22

21

ImageIcon widget is the most suitable widget to use images as icons in Flutter. You can use its property image to assign your own image.

ImageIcon(
     AssetImage("images/icon.png"),
     color: Colors.red,
     size: 24,
),

answered Jan 24 '22 at 13:22

Suresh B B

1,387
11
13

1

This is useful on a BottomNavigationBar where the icon colour should automatically change when it`s active or not. – D. Ndungu Jul 20 '22 at 11:19
The argument type 'ImageIcon' can't be assigned to the parameter type 'Icon?'. – Mahmoud Samy Jul 20 '23 at 19:01
SideMenuItem( priority: 0, title: 'Dashboard', onTap: (index, _) { sideMenu.changePage(index); }, icon: ImageIcon( AssetImage("images/icon.png"), color: Colors.red, size: 24, ), badgeContent: const Text( '3', style: TextStyle(color: Colors.white), ), ), – Mahmoud Samy Jul 20 '23 at 19:01
what should i do? – Mahmoud Samy Jul 20 '23 at 19:01

score 6 · Answer 3 · answered Dec 18 '21 at 21:55

Most of the time you'll find that the underling icon property is a Widget, so you can directly replace your Icon with Image.asset and provide it a width, height and fit according to your needs:

Image.asset(
  'assets/images/foo.png',
  width: 44,
  height: 44,
  fit: BoxFit.cover,
)

Example (in a TabBar)

TabBar(
  tabs: [
    Tab(
      text: 'Icon',
      icon: Icon(Icons.call), //    <-- Icon
    ),
    Tab(
      text: 'Image',
      icon: Image.asset( //        <-- Image
        'assets/images/foo.png',
        height: 44,
        fit: BoxFit.cover,
      ),
    ),
  ],
)

score 4 · Answer 4 · answered Nov 20 '20 at 07:37

So follow up to @RobinSinha answer, using the Tab widget looks weirds as the Tab widget has an external padding, so i'd suggest to avoid that:

BottomNavigationBarItem(
       icon: Image.asset(
           "assets/images/image.png",
            width: <put your desired width, recommended 24.0>,
            height: <put your desired width, recommended 24.0>,
           ),
        label: '<name for icon>'
),

score 0 · Answer 5 · answered Oct 18 '22 at 03:30

Little known fact. We can use PNG files in Flutter as an icon and change their color with color parameter like below:

 IconButton(
                        icon: ImageIcon(
                          AssetImage('assets/images/iconRandom.png'),
                          size: 30,
                          color: Colors.red,
                        ),
                        onPressed: () {
                          // do something here
                        }),

So no need to create several different image files just for changing colors depending on condition. We can just change color of the PNG file.

score -1 · Answer 6 · answered Oct 25 '19 at 06:14

As @RobinSinha has said you can use Tab and then in for icon you can try the following

Tab(
        icon: Container(
          child: Image(
            image: AssetImage(
              'assets/logo.png',
            ),
            fit: BoxFit.cover,
          ),
          height: 100,
          width: 100,
        ),
      )

How to use an image instead of an icon in flutter?

6 Answers6