Changing the image shown in an mx:Image based on the selection in an mx:List

Question

When I selected the mx:List, how can I make the mx:Image display the selected item?

<mx:List id="dataList" dataProvider="{mdataList}" width="100%" height="190" >
<mx:itemRenderer>
 <mx:Component>      
  <mx:HBox height="30" borderStyle="solid" cornerRadius="10" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
   <mx:Image name="icon" source="@Embed(source='Images/see.png')"  visible="false"/>
   <mx:Label width="165" height="100%" text="{data.legend}" />
   <mx:Label name="txt" width="20" height="100%" text="{data.Name}"  visible="false" />
  </mx:HBox>
 </mx:Component>
</mx:itemRenderer>