How to include an icon as a custom component in the React Spreadsheet Ribbon Toolbar?

This knowledge base explains you how to include an icon as a custom component in the React Spreadsheet Ribbon Toolbar. Using the addRibbonTabs method, you can insert a new ribbon tab into the Spreadsheet. On the user defined function, initialize the button object and append the custom component as a template of the Ribbon tab item.

[index.js]

import * as React from 'react';
import ReactDOMServer from 'react-dom/server';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { Button } from '@syncfusion/ej2-buttons';
import { createElement } from '@syncfusion/ej2-base';
import CustomIcon from './custom-icon.js';
import './index.css';

function App() {
 let spreadsheet;
 const onCreated = () => {
   // To add a new ribbon tab.
   spreadsheet.addRibbonTabs([
     {
       header: { text: 'Review' },
       content: [
         {
           tooltipText: 'New Comment',
           // Template for the new ribbon item.
           template: appendCustomBtn('custombtn'),
         },
       ],
     },
   ]);
 }
 const appendCustomBtn = (id) => {
   // Initialize the EJ2-button object.
   let iconButton = new Button();
   // Append the button element to the template.
   iconButton.appendTo(createElement('button', { id: id }));
   // Update the icon to the template component.
   iconButton.content = ReactDOMServer.renderToString(
     <CustomIcon />
   );
   // Button click event handler.
   iconButton.element.onclick = function () {
     alert('New Comment Button Clicked');
   };
   return iconButton.element;
 }

 return (
   <div className='control-section spreadsheet-control'>
     <SpreadsheetComponent
       ref={(ssObj) => {
         spreadsheet = ssObj;
       }}
       created={onCreated}
     ></SpreadsheetComponent>
   </div>
 );
}
export default App;

const root = createRoot(document.getElementById('sample'));
root.render(<App />);

Sample Link:

https://stackblitz.com/edit/react-sfju61-j6zsxa?file=index.js

Output:

For further information about this, see the documentation that follows.

https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started

https://ej2.syncfusion.com/react/documentation/button/getting-started

https://ej2.syncfusion.com/react/documentation/appearance/icons

Conclusion
I hope you enjoyed learning about how to include an icon as a custom component in the React Spreadsheet Ribbon Toolbar.

You can refer to our React Spreadsheet’s feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Spreadsheet example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our React Spreadsheet and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!