How to fill color in the icon in flutter

Question

I am new in flutter. I am using multiple theme(i.e. dark mode) in the app. So, When we use icon in different theme, automatically take background color according to the theme. I want background color of theme but not inside the icon.

Example: I am using youtube's icon in dark theme so look like below,

But i want to like below,

I am using

Icon(
    FontAwesomeIcons.youtube,
    color: Colors.red
)

So how to fill the color white in this icon ? (Or also you can suggest me to do that in proper as well as better way to implement)

(so, i can use white filled icon in every theme)

Answer 1

You can use a Stack to place a filled Container under your icon like so:

Stack(children: <Widget>[
      Positioned.fill(
        child: Container(
          margin: EdgeInsets.all(5), // Modify this till it fills the color properly
          color: Colors.white, // Color
        ),
      ),
      Icon(
        FontAwesomeIcons.youtube, // Icon
        color: Colors.red,
      ),
      ),
    ])

Since its a container, you can also modify its shape in case there are random icon shapes that a normal square does not help in :P

I tried filling the icon play_circle_filled with green using this on DartPad and it gave me this: