diff --git a/example/qml/page/T_Buttons.qml b/example/qml/page/T_Buttons.qml
index 354d25bb..b35c7f5d 100644
--- a/example/qml/page/T_Buttons.qml
+++ b/example/qml/page/T_Buttons.qml
@@ -167,16 +167,26 @@ FluScrollablePage{
         height: 68
         paddings: 10
         Layout.topMargin: 20
-        FluIconButton{
-            iconSource:FluentIcons.ChromeCloseContrast
-            disabled:icon_button_switch.checked
-            iconSize: 15
+        Row{
+            spacing: 20
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            onClicked:{
-                showSuccess("点击IconButton")
+            FluIconButton{
+                iconSource:FluentIcons.ChromeCloseContrast
+                disabled:icon_button_switch.checked
+                iconSize: 15
+                onClicked:{
+                    showSuccess("点击IconButton")
+                }
+            }
+            FluIconButton{
+                disabled:icon_button_switch.checked
+                iconDelegate: Image{ width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
+                onClicked:{
+                    showSuccess("点击IconButton")
+                }
             }
         }
         FluToggleSwitch{
diff --git a/src/imports/FluentUI/Controls/FluIconButton.qml b/src/imports/FluentUI/Controls/FluIconButton.qml
index 7214313b..daac2897 100644
--- a/src/imports/FluentUI/Controls/FluIconButton.qml
+++ b/src/imports/FluentUI/Controls/FluIconButton.qml
@@ -13,6 +13,7 @@ Button {
     property color pressedColor: FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
     property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
     property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
+    property Component iconDelegate: com_icon
     property color color: {
         if(!enabled){
             return disableColor
@@ -54,16 +55,22 @@ Button {
             visible: control.activeFocus
         }
     }
-    contentItem: Item{
+    Component{
+        id:com_icon
         FluIcon {
             id:text_icon
             font.pixelSize: iconSize
             iconSize: control.iconSize
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            anchors.centerIn: parent
             iconColor: control.iconColor
-            iconSource: control.iconSource;
+            iconSource: control.iconSource
+        }
+    }
+    contentItem: Item{
+        Loader{
+            anchors.centerIn: parent
+            sourceComponent: iconDelegate
         }
         FluTooltip{
             id:tool_tip