Button colour (using TEMPLATE node) help - the next stage

[Trying_to_learn]

The question I asked yesterday has been resolved.
Again: Thanks to all who replied.

Now I am getting greedy with what I am wanting buttons (template node) to do.

This is from the template node now:

<md-button class="vibrate filled touched bigfont rounded" style="color: red; background-color:#000000"   ng-click="send({payload: 'dummy_payload'})">
       <i class="material-icons"> pause / play_arrow</i>
</md-button> 

Really nice.

I get a button looking like this:

Which is great - learning from yesterday's question.
(I'll be honest here. I do not really understand how I got this working.
I used this site:
buttons
to help me get here. Now I'm stuck again)

There are 3 things in that button.
1 - the pause icon.
2 - the /.
3 - the play icon.

Now, I'm wanting to be greedy and set the colours from outside.
Not the colour for all, but individual colours.

Why?
This is a two function button. (Kinda obvious)
Press one time it pauses playback.
Press it another time and it pauses playback.

I'm wanting the colour of the icons to reflect the mode.

Help.

P.S.
yes, I am out of my depth.
I don't understand it completely.
Looking at the site I mentioned above it is for a whole other set of buttons as I can see/make. But it is suffice to help me kind of get the structure. KINDA!

Yes, "RTFM" etc. Doesn't work for me. Don't know why.
I'm looking. It doesn't make sense.
Thus I am asking.

[bakman2]

I am no dashboard/template expert, but it needs to be solved with ng-style

Working example:

[{"id":"d974e2d9.258078","type":"ui_template","z":"498e30f7.ac45c8","group":"7a5d5f88.d2ba6","name":"","order":0,"width":0,"height":0,"format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#000000\" ng-click=\"send({payload: 'dummy_payload'})\">\n       <i class=\"material-icons\">\n           <span style=\"color:{{msg.payload.pause}}\">pause</span> / <span style=\"color:{{msg.payload.play}}\">play_arrow</span>\n           </i>\n</md-button> ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":540,"y":504,"wires":[[]]},{"id":"13e70ce8.21bc33","type":"inject","z":"498e30f7.ac45c8","name":"{\"play\":\"#ff9900\",\"pause\":\"#00ff33\"}","topic":"","payload":"{\"play\":\"#ff9900\",\"pause\":\"#00ff33\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":480,"wires":[["d974e2d9.258078"]]},{"id":"dc7352c1.22d55","type":"inject","z":"498e30f7.ac45c8","name":"{\"play\":\"#ffffff\",\"pause\":\"ffffff\"}","topic":"","payload":"{\"play\":\"#ffffff\",\"pause\":\"ffffff\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":288,"y":528,"wires":[["d974e2d9.258078"]]},{"id":"7a5d5f88.d2ba6","type":"ui_group","z":"","name":"button","tab":"883914f8.c9986","order":1,"disp":true,"width":"6","collapse":false},{"id":"883914f8.c9986","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

With msg.payload.play and msg.payload.pause you can set the color attributes.

[Trying_to_learn]

Love you!

Thanks.

I'll run away and play with it.