Icons and separator in Angular Split Button

25 Sep 20266 minutes to read

Angular Split Button Icons

Angular Split Button can have an icon to provide the visual representation of the action. To place the icon on a Angular Split Button, set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the Angular Split Button. You can customize the icon’s position by using the iconPosition property

The following example illustrates how to place icon in Angular Split Button component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'


 
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        
        SplitButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render splitbutton. -->
               <ejs-splitbutton content="Paste" [items]='items' iconCss="e-sb-icons e-paste"></ejs-splitbutton>
               <ejs-splitbutton content="Paste" [items]='items' iconCss="e-sb-icons e-paste" iconPosition="Top"></ejs-splitbutton></div>`
})

export class AppComponent {
  public items: ItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    }
     ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element.
You can also use third party icons on the splitBtn using the iconCssproperty.

Vertical Button

Vertical Button in Angular Split Button can be achieved by adding e-vertical class using cssClass property.

The following example illustrates how to vertical support in Angular Split Button component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'


 
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        
        SplitButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render splitbutton. -->
               <ejs-splitbutton content="Paste" [items]='items' iconCss="e-sb-icons e-paste" cssClass="e-vertical" iconPosition="Top"></ejs-splitbutton></div>`
})

export class AppComponent {
  public items: ItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    }
     ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element.
You can also use third party icons on the Angular Split Button using the iconCssproperty.

Separator

Angular Split Button component has Separator support. This can be achieved by setting separator as true.

The following example illustrates how to enable separator support in Angular Split Button component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'


 
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        
        SplitButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render splitbutton. -->
               <ejs-splitbutton content="Paste" [items]='items' iconCss="e-sb-icons e-paste"></ejs-splitbutton></div>`
})

export class AppComponent {
  public items: ItemModel[] = [
    {
        text: 'Cut',
        iconCss: 'e-sb-icons e-cut'
    },
    {
        text: 'Copy',
        iconCss: 'e-icons e-copy'
    },
    {
        text: 'Paste',
        iconCss: 'e-sb-icons e-paste'
    },
    {
        separator: true
    },
    {
        text: 'Font',
        iconCss: 'e-sb-icons e-font'
    },
    {
        text: 'Paragraph',
        iconCss: 'e-sb-icons e-paragraph'
    }];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also