javascriptangulartypescriptdevextremedevextreme-angular

How to customize dropdown button in dx-toolbar (DevExtreme)?

I'm using the DevExtreme(v20.1.4) toolbar component in Angular(v8.2.14).
When I place a dx-toolbar and set locateInMenu="always" for toolbar items, I see a dropdown button with dx-icon-overflow.

Is there any way to customize this button to have a string on it?

Solution

  • I used CSS to update that dropdown button.

    .customized-toolbar .dx-toolbar-button .dx-dropdownmenu-button .dx-button-content {
  & > i {
    display: none !important;
  }

  &:after {
    display: block;
    content: 'Other Actions';
    color: white;
    line-height: 18px;
    font-size: 14px;
  }
}