diff --git a/.gitignore b/.gitignore
index 6f2652816..212e79223 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@ dist
 lib
 node_modules
 temp
-vite.config.js.timestamp*
\ No newline at end of file
+vite.config.js.timestamp*
+.idea
diff --git a/packages/material/src/Button/Button.tsx b/packages/material/src/Button/Button.tsx
index 062c48d5d..d3be98ded 100644
--- a/packages/material/src/Button/Button.tsx
+++ b/packages/material/src/Button/Button.tsx
@@ -357,7 +357,7 @@ const Button = $.component(function Button({
       <Show when={props.startIcon}>
         {(startIcon) => (
           <ButtonStartIcon class={classes.startIcon} ownerState={allProps}>
-            {startIcon()}
+            {startIcon()()}
           </ButtonStartIcon>
         )}
       </Show>
@@ -365,7 +365,7 @@ const Button = $.component(function Button({
       <Show when={props.endIcon}>
         {(endIcon) => (
           <ButtonEndIcon class={classes.endIcon} ownerState={allProps}>
-            {endIcon()}
+            {endIcon()()}
           </ButtonEndIcon>
         )}
       </Show>
diff --git a/packages/material/src/Button/ButtonProps.ts b/packages/material/src/Button/ButtonProps.ts
index 8e15f749a..334f90247 100644
--- a/packages/material/src/Button/ButtonProps.ts
+++ b/packages/material/src/Button/ButtonProps.ts
@@ -1,13 +1,14 @@
 import { ButtonBaseTypeMap, ExtendButtonBaseTypeMap } from "../ButtonBase";
-import { OverrideProps, OverridableComponent } from "../OverridableComponent";
 import { Theme } from "../styles";
 import { ButtonClasses } from "./buttonClasses";
 import SxProps from "@suid/system/sxProps";
 import {
   DistributiveOmit,
   ElementType,
+  OverridableComponent,
   OverridableStringUnion,
   OverridableTypeMap,
+  OverrideProps,
 } from "@suid/types";
 import { JSX, JSXElement } from "solid-js";
 
@@ -61,14 +62,14 @@ export type ButtonTypeMap<P = {}, D extends ElementType = "button"> = {
      */
     disableElevation?: boolean;
     /**
-     * If `true`, the  keyboard focus ripple is disabled.
+     * If `true`, the keyboard focus ripple is disabled.
      * @default false
      */
     disableFocusRipple?: boolean;
     /**
      * Element placed after the children.
      */
-    endIcon?: JSXElement;
+    endIcon?: () => JSXElement;
     /**
      * If `true`, the button will take up the full width of its container.
      * @default false
@@ -91,7 +92,7 @@ export type ButtonTypeMap<P = {}, D extends ElementType = "button"> = {
     /**
      * Element placed before the children.
      */
-    startIcon?: JSXElement;
+    startIcon?: () => JSXElement;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */