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>