add text to icon in button (#587) (#590)

* add text to icon in button (#587)

* fab's comment

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/src/components/Taipy/Button.tsx

@@ -12,6 +12,7 @@
  */
 
 import React, { useState, useEffect, useCallback } from "react";
+import CardHeader from "@mui/material/CardHeader";
 import MuiButton from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 
@@ -26,6 +27,8 @@ interface ButtonProps extends TaipyActiveProps {
     defaultLabel?: string;
 }
 
+const cardSx = { p: 0 };
+
 const Button = (props: ButtonProps) => {
     const { id, onAction = "", defaultLabel } = props;
     const [value, setValue] = useState<stringIcon>("");
@@ -61,6 +64,16 @@ const Button = (props: ButtonProps) => {
             <MuiButton id={id} variant="outlined" className={className} onClick={handleClick} disabled={!active}>
                 {typeof value === "string" ? (
                     value
+                ) : (value as Icon).text ? (
+                    <CardHeader
+                        sx={cardSx}
+                        avatar={
+                            <IconAvatar img={value as Icon} className={getSuffixedClassNames(className, "-image")} />
+                        }
+                        title={(value as Icon).text}
+                        disableTypography={true}
+                        className={getSuffixedClassNames(className, "-image-text")}
+                    />
                 ) : (
                     <IconAvatar img={value as Icon} className={getSuffixedClassNames(className, "-image")} />
                 )}