How to Add an Icon to a List of Views in Adobe Flex Mobile Project

Question

I would like to add an Icon to a list of views in my flex mobile project. I am not sure of how to approach this. Here is the line of code, and below it is an image of the view.

        <s:List id="calcList" width="100%" height="98%" alternatingItemColors="[#0099999,#990000]"
            change="calcList_changeHandler(event)" color="#FFFAF0" contentBackgroundColor="#fffdd0"
            fontWeight="normal" labelField="name" textAlign="left" >


        <s:dataProvider>

            <s:ArrayCollection id="calcListCollection">  
                <fx:Object viewID="A1c" name="A1c " category="Medical"/>
                <fx:Object viewID="BMI" name="BMI " category="Fitness"/>
                <fx:Object viewID="GPA" name="GPA " category="Education"/>
                <fx:Object viewID="Tip" name="Tip " category="Personal" />


            </s:ArrayCollection>
        </s:dataProvider>
    </s:List>

Answer 1

Created a .MXML component called MyIconRenderer.mxml

<!--?xml version="1.0" encoding="utf-8"?-->
   <s:IconItemRenderer
   xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   iconField="icon"
   labelField="name"
   messageField="category"
   iconWidth="45"
   iconHeight="45"
/>

Then Implement the code within the Array List by calling the Item Rendered "MyIconRenderer" as follow:

 itemRenderer="MyIconRenderer"

Then pass the icon property to your selected Lists' Array Collection.