Icons and separator in Angular Split button component
27 Apr 20246 minutes to read
SplitButton Icons
SplitButton can have an icon to provide the visual representation of the action. To place the icon on a SplitButton, set the iconCss
property to e-icons
with the required icon CSS. By default, the icon is positioned to the left side of the SplitButton. You can customize the icon’s position by using the iconPosition
property
The following example illustrates how to place icon in SplitButton 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';
import 'zone.js';
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 theiconCss
property.
Vertical Button
Vertical Button in SplitButton can be achieved by adding e-vertical
class using cssClass
property.
The following example illustrates how to vertical support in SplitButton 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';
import 'zone.js';
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 SplitButton using theiconCss
property.
Separator
SplitButton component has Separator support. This can be achieved by setting separator
as true
.
The following example illustrates how to enable separator support in SplitButton 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';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));