There are many options to customize the plain behavior of the split button. The icons can be applied for the associated default command button and menu items separately using the icon property. The icons are aligned to the left side by default, but this can be applied to the right side as well, using the iconPos property, whereas the skinning behavior of component and overlay are modified through the style, styleClass, menuStyle, and menuStyleClass class properties. A basic example of the SplitButton component with the defined label text would be written as follows:

<p-splitButton label="Create" icon="fa-check" iconPos="right"  
  menuStyleClass="customized-menu" [model]="itemsIcons">
</p-splitButton>

In the preceding example, the overlay menu default styles are changed with the help of the menuStyleClass property. For example, in this case, the default width of the overlay is changed by setting the menuStyleClass class name as shown here:

.customized-menu {
  width: 140%;
}

The following screenshot shows a snapshot result of the split button example:

In the preceding snapshot, the split button is customized with icons, the create command button icon is aligned to the right side, and the width of the overlay increased to accommodate both icons and text.