Displaying icons in a Flex ComboBox control

making the ComboBox control display icons also should be pretty trivial. Well, after about 2 minutes of analyzing the documentation, it turns out it is pretty simple. The trick was to set the iconField property on the ComboBox instance’s dropdown property, which is a reference to the combo box’s internal List control

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/08/18/displaying-icons-in-a-flex-combobox-control/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            import mx.events.FlexEvent;

            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            public var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            public var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            public var BulletCritical:Class;

            private function init():void {
                comboBox.dropdown.iconField = "icon";
            }
         ]]>
     </ mx:Script >

     < mx:ComboBox  id ="comboBox"
            rowCount ="4"
            width ="200"
            themeColor ="haloSilver"
            textIndent ="5"
            selectedIndex ="-1"
            prompt ="Please select an item"
            creationComplete ="init()" >
         < mx:dataProvider >
             < mx:Array >
                 < mx:Object  label ="Item 1"  icon ="BulletWarning"   />
                 < mx:Object  label ="Item 2"  icon ="BulletCritical"   />
                 < mx:Object  label ="Item 3"  icon ="BulletCritical"   />
                 < mx:Object  label ="Item 4"  icon ="BulletCheck"   />
                 < mx:Object  label ="Item 5"  icon ="BulletWarning"   />
                 < mx:Object  label ="Item 6"  icon ="BulletCheck"   />
                 < mx:Object  label ="Item 7"  icon ="BulletCheck"   />
                 < mx:Object  label ="Item 8"  icon ="BulletCritical"   />
             </ mx:Array >
         </ mx:dataProvider >
     </ mx:ComboBox >

</ mx:Application >