Is there any way to change Flutter icons "secondary" color?

March 27, 2023

I am using Icons.verified in flutter and I can change the background color fine, but cannot change the inner tick color.
Any way to do that ?

const verifiedBadge = Icon(
  Icons.verified,
  color: Color(0xFF27aae1),
  size: 28,
);

I looked into the available properties but do not see any secondary, highlightColor or something that might get the job done.

If I can’t do this with the Icons any other way to achieve it ?

PS: I tried a stack in which i used the component above and a tick trying to cover the tick and use new color but looked ugly

>Solution :

There aren’t any direct option to resolve this.
You may try putting it in a stack and place a coloured container below the icon instead putting it on the top

    Stack(
        children: [
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                width: 20,
                decoration: const BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ),
          Icon(
            Icons.verified,
            color: Color(0xFF27aae1),
            size: 38,
          ),
        ],
      ),