Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ -->
<mx:Application name="Panel_titleIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:String id="lorem" source="lorem.txt" />

    <mx:Panel id="panel"
            title="Panel title"
            titleIcon="@Embed('assets/Panel.png')">
        <mx:Text id="txt"
                text="{lorem}"
                width="500"
                textAlign="justify"
                selectable="false" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ -->
<mx:Application name="Panel_titleIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:String id="lorem" source="lorem.txt" />

    <mx:Script>
        <![CDATA[
            import mx.controls.Text;
            import mx.containers.Panel;

            [Embed("assets/Panel.png")]
            private const PanelTitleIcon:Class;

            private var panel:Panel;

            private function init():void {
                var txt:Text = new Text();
                txt.text = lorem;
                txt.selectable = false;
                txt.width = 500;
                txt.setStyle("textAlign", "justify");

                panel = new Panel();
                panel.title = "Panel title";
                panel.titleIcon = PanelTitleIcon;
                panel.addChild(txt);
                addChild(panel);
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/22/adding-a-title-icon-to-a-flex-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

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

            [Embed(source="assets/iconCritical.png")]
            private var IconCritical:Class;

            private var alert:Alert;

            private function init():void {
                var alertText:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse rutrum metus nonummy augue. In hac habitasse platea dictumst. Nulla arcu libero, nonummy non, suscipit a, mollis non, augue. Maecenas porttitor urna vel enim. Nam eget tortor. Mauris facilisis suscipit felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nunc turpis, venenatis non, laoreet at, fringilla nec, purus. Sed sodales. Sed turpis. Vestibulum sagittis justo id metus. Sed placerat, nibh lobortis mattis adipiscing, sapien wisi interdum arcu, nec vehicula sem tortor id nibh.";
                var alertTitle:String = "The quick brown fox jumped over the lazy dog.";
                alert = Alert.show(alertText, alertTitle, 4, null, null, IconCritical);
                alert.titleIcon = BulletCritical;
            }
        ]]>
    </mx:Script>

    <mx:Button label="Launch alert" click="init();" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/delete.png")]
            public var DeleteIcon:Class;
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:Panel id="panel"
            titleIcon="{DeleteIcon}"
            title="WARNING"
            status="I'm a custom status message!"
            width="80%">
        <mx:Text text="{lorem}" width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

If you want to customize the appearance of the status message in the Panel, you can set the statusStyleName style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myStatusStyle {
            fontWeight: bold;
            color: red;
        }
    </mx:Style>

    <mx:String id="lorem">
        <![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In malesuada sapien eu ipsum. Integer id diam in sapien lobortis pulvinar. Donec mauris augue, sodales vel, luctus elementum, convallis eget, sapien. Suspendisse pretium elementum erat. Ut posuere ornare sem. Nam vestibulum luctus mi. Praesent feugiat blandit ante. Fusce vel massa. Praesent diam. Maecenas risus. Aliquam erat volutpat. Vivamus eget velit vel turpis venenatis dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam mattis nibh. Quisque nec odio.]]>
    </mx:String>

    <mx:Panel id="panel"
            title="WARNING"
            status="I'm a custom status message!"
            statusStyleName="myStatusStyle"
            width="320">
        <mx:Text text="{lorem}" width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.