Whole Icon button becomes grey : flutter

Question

I'm trying to apply a color on play_icon in bottom navigation bar. The problem is the whole icon becomes grey. What I want to achieve is this:

What I am currently having is this:

This is the code:

Material(
                    color:
                        light_mode ? Color(0xFFFFFFFF) : Color(0xFF616161),
                    child: Container(
                        alignment: Alignment.center,
                        height: 60,
                        width: MediaQuery.of(context).size.width,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(Icons.skip_previous),
                                    onPressed: () {},
                                    color: Colors.grey)),
                            Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.play_circle_fill_outlined,
                                        size: 45),
                                    onPressed: () {},
                                    color: light_mode
                                        ? Color(0xFFEA80FC)
                                        : Color(0xFF6D6D6D))),
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(Icons.skip_next),
                                    onPressed: () {},
                                    color: Colors.grey)),
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.bookmark_border_outlined),
                                    onPressed: () {},
                                    color: Colors.grey)),
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(Icons.share_rounded),
                                    onPressed: () {},
                                    color: Colors.grey)),
                          ],
                        )))

Answer 1

How about this one.

From this your code,

Padding(
  padding: EdgeInsets.only(right: 10),
  child: IconButton(
    icon: Icon(Icons.play_circle_fill_outlined, size: 45),
    onPressed: () {},
    color: light_mode ? Color(0xFFEA80FC) : Color(0xFF6D6D6D),
  ),
),

to this one.

SizedBox(
  width: 36,
  height: 36,
  child: FloatingActionButton(
    onPressed: () {},
    backgroundColor:
        light_mode ? Color(0xFFEA80FC) : Color(0xFF6D6D6D),
    child: Icon(Icons.play_arrow),
  ),
),

Answer 2

in your code:

Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.play_circle_fill_outlined,
                                        size: 45),
                                    onPressed: () {},
                                    color: light_mode
                                        ? Color(0xFFEA80FC)
                                        : Color(0xFF6D6D6D))),

you should set color for IconButton's parent, not itself. for example, you can use a container with decoration (with changing borderRadius you can achieve circular button):

Container(
  decoration: BoxDecoration(
    color: const Colors.grey,
    border: Border.all(
      color: Colors.black,
      width: 8,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
padding: EdgeInsets.only(right: 10),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.play_circle_fill_outlined,
                                        size: 45),
                                    onPressed: () {},
                                    color: Colors.white,
),