GXT 4 custom split button using material icon.

AppResources.java

package com.sencha.gxt.test.client.button_custommenu;

import com.google.gwt.core.shared.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface AppResources extends ClientBundle { 

  public static AppResources INSTANCE = GWT.create(AppResources.class);

  public interface Styles extends CssResource {
    String toolButton();
 
    String toolButtonOver();
  }

  @Source({ "styles.gss" })
  Styles styles();

}

CustomSplitButton.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.Style.Anchor;
import com.sencha.gxt.core.client.Style.AnchorAlignment;
import com.sencha.gxt.themebuilder.base.client.config.ThemeDetails;
import com.sencha.gxt.widget.core.client.button.IconButton.IconConfig;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.button.ToolButton;
import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.menu.Menu;
import com.sencha.gxt.widget.core.client.menu.MenuItem;

public class CustomSplitButton implements IsWidget {

  private FlowLayoutContainer widget;

  @Override
  public Widget asWidget() {
    if (widget == null) {
      AppResources.INSTANCE.styles().ensureInjected();
      
      // Used with CSS3/themebuilder themes
      ThemeDetails themeDetails = GWT.create(ThemeDetails.class);
      
      int size = 36;
      String color = "orange";
      String backgroundColor = themeDetails.button().backgroundColor();
      String borderTop = "borderTop"  + themeDetails.button().border().color();
      String borderRight = "borderRight"  + themeDetails.button().border().color();
      String borderBottom = "borderBottom"  + themeDetails.button().border().color();
      
      // https://material.io/tools/icons/?style=baseline - material icon name chooser 
      String iconName = "expand_more";
      
      // define the styles for the button
      String toolStyle = AppResources.INSTANCE.styles().toolButton();
      String toolOverStyle = AppResources.INSTANCE.styles().toolButtonOver();

      // setup the tool button config
      IconConfig toolConfig = new IconConfig(toolStyle, toolOverStyle);

      // Button with material theme icon
      final ToolButton rightButton = new ToolButton(toolConfig);
      //button2.setBorders(true); // debug Size
      rightButton.setPixelSize(size, size);
      rightButton.addStyleName("material-icons");
      rightButton.addStyleName("md-" + size);
      rightButton.getElement().getStyle().setFontSize(size, Unit.PX);
      rightButton.getElement().getStyle().setColor(color);
      rightButton.getElement().getStyle().setBackgroundColor(backgroundColor);
      rightButton.getElement().getStyle().setProperty("borderTop", borderTop);
      rightButton.getElement().getStyle().setProperty("borderRight", borderRight);
      rightButton.getElement().getStyle().setProperty("borderBottom", borderBottom);
      
      rightButton.getElement().setInnerText(iconName);
      rightButton.addSelectHandler(new SelectHandler() {
        @Override
        public void onSelect(SelectEvent event) {
          fireSelectEvent(rightButton);
        }
      });
      
      TextButton leftButton = new TextButton("Button");
      leftButton.setHeight(size);
      
      widget = new FlowLayoutContainer();
      widget.add(leftButton);
      widget.add(rightButton);
    }
    return widget;
  }
  
  protected void fireSelectEvent(ToolButton button) {
    Menu menu = new Menu();
    menu.add(new MenuItem("Item 1"));
    menu.add(new MenuItem("Item 2"));
    menu.add(new MenuItem("Item 3"));
    menu.add(new MenuItem("Item 4"));
    menu.add(new MenuItem("Item 5"));

    // Align Menu to button
    AnchorAlignment alignTo = new AnchorAlignment(Anchor.TOP_LEFT, Anchor.BOTTOM_LEFT, true);
    menu.show(button.getElement(), alignTo, 0, 0);
  }


}

CustomSplitButtonExample.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class CustomSplitButtonExample implements EntryPoint {
  
  @Override
  public void onModuleLoad() {
    RootPanel.get().add(new CustomSplitButton());
  }

}

styles.gss

.toolButton {
	margin-left: 0px !important;
	border-left: 1px solid gray;

}

.toolButtonOver {
	margin-left: 0px !important;
	
	opacity: .9;
	
}

Don't forget to add this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">