1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Change icons of dropdown toolbar buttons

Change icons of dropdown toolbar buttons

Hi,

I am able to change predefined icons of buttons (in this example 'bold' button) like this:

textEditor.toolbarSettings.itemConfigs.bold = { icon: 'fa fa-home' };

But this does not work on editor's buttons which have dropdown options like 'formats', 'alignments' etc

How can I achieve that?

Here is an example code:
https://stackblitz.com/edit/aq6ajw-qmmxna?file=index.ts


Thanks,

Emil


3 Replies
KP Kokila Poovendran Syncfusion Team December 3, 2024 06:46 AM UTC

Hi Emil R,

Thank you for your inquiry. To change the icons of the dropdown toolbar buttons like 'formats', 'alignments', and others, you can override the icons by modifying the font-family styles of the respective elements. Here’s how you can do it:



<style>

  /* Override default justify-left icon */

  .e-rte-dropdown-popup .e-justify-left::before {

    content: '\f0a8'; /* Your custom icon code */

    font-family: 'Font Awesome 5 Free'; /* Use the correct font family */

    font-weight: 900; /* Ensure the icon's weight is applied */

    font-size: 16px; /* Adjust icon size as needed */

  }


  /* Override default justify-center icon */

  .e-rte-dropdown-popup .e-justify-center::before {

    content: '\f111'; /* Your custom icon code */

    font-family: 'Font Awesome 5 Free'; /* Correct font family */

    font-weight: 900; /* Adjust the icon weight */

    font-size: 16px;

  }


  /* Override default justify-right icon */

  .e-rte-dropdown-popup .e-justify-right::before {

    content: '\f0a9'; /* Your custom icon code */

    font-family: 'Font Awesome 5 Free'; /* Correct font family */

    font-weight: 900; /* Apply bold if necessary */

    font-size: 16px;

  }


  /* Override default justify-full icon */

  .e-rte-dropdown-popup .e-justify-full::before {

    content: '\f039'; /* Your custom icon code */

    font-family: 'Font Awesome 5 Free'; /* Correct font family */

    font-weight: 900; /* Adjust icon weight */

    font-size: 16px;

  }

</style>


<head>

  <link

    rel="stylesheet"

    rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"

  />

</head>




Sample: https://stackblitz.com/edit/hpn5gs-wt5ucs?file=index.js,index.html,package.json


Please use this code snippet and the sample provided to implement the icon changes. If you face any further issues or need additional assistance, feel free to let us know.



AS Adrian Scott December 3, 2024 11:30 AM UTC

1. Using Custom CSS

If the toolbar icons are styled using CSS, you can override the existing styles with your own. For example:

.dropdown-button .icon {

    background-image: url('path-to-your-new-icon.png');

    width: 16px;

    height: 16px;

    display: inline-block;

}


2. Replacing Icons in JavaScript Libraries

If you are using a library like TinyMCE or CKEditor, you can replace toolbar icons programmatically.

TinyMCE Example:


Replace 'custom-icon' with the name or class of your new icon.


3. Swapping Icons Dynamically with JavaScript

If you need to swap the icon dynamically:


document.querySelector('.dropdown-button .icon').classList.replace('old-icon-class', 'new-icon-class');


This code targets the icon inside the dropdown button and replaces the old icon class with a new one.

4. Using Icon Libraries

If your framework uses an icon library (like FontAwesome or Material Icons), update the icon directly in the HTML:

<button class="dropdown-button">

    <i class="fa fa-new-icon"></i>

</button>



KP Kokila Poovendran Syncfusion Team December 11, 2024 05:23 AM UTC

Hi Adrian Scott,


Thank you for your detailed suggestions on customizing toolbar icons. We truly appreciate your input!

If you have any additional queries or need further assistance with implementation, feel free to reach out. We're happy to help.

Thanks again for sharing your insights!



Loader.
Up arrow icon