Clip Background using Icon

[juko]

I have a requirement from our UX to put a background behind different shaped icons (Icons.warning_rounded, Icons.cancel, Icons.info, Icons.archive_rounded).

If all these Icons were just circles it would be really easy as I could simply put a clipped (colored) round container behind these Icons, but with the Icon shapes getting harder and harder I would have to define a custom shape for all these icons.

Does anyone know if there’s a simple solution to have a background color for all icon shapes?

[tenhobi]

Can you maybe post some visual example so we can imagine better what you are getting now and what you want?

[juko]

Sure, in this screenshot you see exactly why I’m trying to do.
The Icons on the left bottom corners have to have a white background:

[tenhobi]

So basically you want to set color of the “cutout”? Aka for example for this icon which is itself the circle with “X” being cut out of it, and you want to just color the “X”, right?

That is a great question! I think a while ago, I wanted to do something like that also. But I don’t think it’s easily possible in general for any shape of icon.

I would say it might be also controversial what to do with some icon shapes like

I am really not sure I would want the cutout of these icons be filled in all cases etc. even if you somehow would come with a solution that would detect cutouts and i.e. draw in custom painter a color underneath.

In your case I would go for custom svgs or maybe bitmaps to do this. Or use icons that are not “inverted” / without cutouts and put them in some colorful circle – you can find icon (or put font) for X, ! etc. that would maybe work in your case.

But I would also like to know whether there is some easy solution someone know.

[hemak]

You can use shadow property of icon like below.

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.warning_outlined,size: 100,color: Colors.yellow,shadows: [Shadow(color: Colors.grey,offset: Offset(1,1),blurRadius: 20)],),
Icon(Icons.message,size: 100,color: Colors.blue,shadows: [Shadow(color: Colors.orange,offset: Offset(1,1),blurRadius: 20)],),
Icon(Icons.backpack,size: 100,color: Colors.green,shadows: [Shadow(color: Colors.red,offset: Offset(1,1),blurRadius: 20)],),
],
)

[juko]

That’s very nice, thank you!