Change icon of button to the icon of option selected from dropdown

Question

I want to change icon of button in split button to the icon of option selected from dropdown.

var items = [
  {
    text: 'Paste',
    iconCss: 'e-btn-icons e-paste',
  },
  {
    text: 'Paste Special',
    iconCss: 'e-btn-icons e-paste-special',
  },
  {
    text: 'Paste as Formula',
    iconCss: 'e-btn-icons e-paste-formula',
  },
  {
    text: 'Paste as Hyperlink',
    iconCss: 'e-btn-icons e-paste-hyperlink',
  },
];
var splitButton = new ej.splitbuttons.SplitButton({
  items: items,
  iconCss: 'e-btn-icons e-paste',
  select: function (ch) {
        var newIcon = ch.item.properties.iconCss;
        this.properties.iconCss = newIcon;
        this.dataBind() ;
  
    }, 
});

splitButton.appendTo('#iconsplitbtn');

Thaneegairaj Sankar · Answer

Hi Ashima, 
 
We can able to change the icon of button in split button using select event. Please find the below code example, 
 
[index.ts] 
 




select: (args) => { 
    const element = splitButton.element.querySelector('.e-btn-icon'); 
    element.classList.remove(element.classList.item(2)); 
    const className = args.element 
      .querySelector('.e-menu-icon') 
      .classList.item(2); 
    element.classList.add(className); 
  } 
 
For your reference we have prepared a sample, please find the below link. 
 
Sample: https://stackblitz.com/edit/vuzxah?file=index.ts 
 
Could you please check the above details and get back to us whether it fulfill your requirement or need further assistance on this. 
 
Regards, 
Thaneegairaj S