reactjs - Could we use Material Icon with PrimeReact button

Question

Currently I'm using Button from PrimeReact. They are using icon from PrimeIcons but the number of icon are limited and I'd like to use Material Icons with it.

<Button label='View/Edit Job' icon="pi pi-pencil" className="p-button-info" 
                  tooltip='View/Edit Job'
                  onClick={(e) => gotoJob(e, job.id)} style={{ width: '100%' }} />

If that is possible, please advice me.

Answer 1

Yes, you can. But you will not be able to use it like you are using it currently. You can also use fontawesome icons. This is probably the best way yo use it.

<Button
    label="Hello"
    style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: '100%'
    }}
    className="p-button-info" 
    tooltip='View/Edit Job'
    onClick={(e) => gotoJob(e, job.id)}
  >
    <AccountCircleIcon />
  </Button>