Mui Button with Start/End Icons

[GYavicoli]

Do the MuiButtons support passing in an Icon for the StartIcon and EndIcon properties?
I have tried a few solutions in my props settings but nothing seems to work:

{ key: "Previous Btn", type: "MuiButton", props: { variant: { value: "contained" }, size: { value: "large" }, children: { value: "Previous" }, startIcon: { value: "ArrowBackIcon" }, }

Any advice?

For now I'm using the following and it works but would like the ability to choose the icons for other buttons.

{ key: "Previous Btn", type: "MuiButton", props: { variant: { value: "contained" }, size: { value: "large" }, children: { value: "\u2190 \u00a0 Previous" }, }

[ashalugin]

Hi @GYavicoli,

Here's one way you can do it:

import CloudUploadIcon from '@mui/icons-material/CloudUpload'
import {define} from '@react-form-builder/core'

const MuiCloudUploadIcon = () => {
  return <CloudUploadIcon/>
}

export const muiCloudUploadIcon = define(MuiCloudUploadIcon, 'MuiCloudUploadIcon')

{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "children": [
      {
        "key": "muiButton1",
        "type": "MuiButton",
        "children": [
          {
            "key": "muiCloudUploadIcon1",
            "type": "MuiCloudUploadIcon",
            "slot": "startIcon"
          }
        ]
      }
    ]
  }
}

[GYavicoli]

Was hoping I didn't have to export out each icon and add to the view but figured this was the proper way.

THank you.

[ashalugin]

You can also create your own "Button" component with built-in icons and use it. The code for the MUI Button component can be found here: https://github.com/optimajet/formengine/blob/master/community/src/packages/views/material-ui/src/components/MuiButton.tsx.