react froala, how can i toolbar button icon change?

Question

I'm using the Froala WYSIWYG editor with React. How can I change the toolbar button icon? For example, I'd like to change the icon of the "bold" button to the Font Awesome 6 FaCss3Alt icon from react-icons. Below is my current configuration for the Froala editor:

const config = {
   toolbarButtons: {
   ....
   },
   imageAllowedTypes: ["jpeg", "jpg", "png"],
   height: "434",
   width: "100%",
   quickInsertEnabled: false,
   videoInsertButtons: ["videoBack", "|", "videoByURL", "videoUpload"],
   paragraphFormat: {
     N: "Normal",
     heading1: "Heading 1",
     H2: "Heading 2",
   },
 };

How can I achieve this?

Answer 1

Try with this:

toolbarButtons: {
      bold: {
         icon: <FaCss3Alt />, // Use the FaCss3Alt icon
         tooltipText: "Bold", // Optional tooltip text
      },
   },

With these changes, the "bold" button in your Froala WYSIWYG editor toolbar should now display the Font Awesome 6 FaCss3Alt icon.