How to show dynamic icons on Zoho Creator page

How to show dynamic icons on Zoho Creator page

Good day! Suppose I have three KPI panels at the top of a Zoho Creator Page. Each panel compares a current year metric to a prior year. How can I dynamically display an up or down arrow icon next a metric?

1. I tried creating a page variable with the following code:
input.displayIcon = if(input.quotedDifference < 0,"arrows-3-super-bold-down","arrows-3-super-bold-up");

2. And inserting the page variable in ZML code, but it didn't work:
<image marginLeft='10px' marginBottom='5px' marginTop='5px' color='#2D2D2D' width='40px' height='40px' type='icon' value='${displayIcon}' size='16px' cornerRadius='20px' iconType='solid' /> </pc>

Alternatively, is there a way to color code fonts dynamically?