Icons in Angular Drop down button component
27 Apr 20249 minutes to read
DropDownButton icons
DropdownButton can have an icon to provide the visual representation of the action. To place the icon on a DropdownButton, set the iconCss
property to e-icons
with the required icon CSS. By default, the icon is positioned to the left side of the DropdownButton. You can customize the icon’s position using the iconPosition
property.
In the following example, the DropdownButton with default iconPosition and iconPosition as Top
is showcased.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
imports: [
DropDownButtonModule
],
standalone: true,
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To render DropDownButton. -->
<button ejs-dropdownbutton [items]='items' content='Message' iconCss='ddb-icons e-message'></button>
<!-- To render DropDownButton with iconposition as 'top'. -->
<button ejs-dropdownbutton [items]='items' content='Message' iconCss='ddb-icons e-message' iconPosition='Top'></button>
</div>`
})
export class AppComponent {
// Initialize action items.
public items: ItemModel[] = [
{
text: 'Edit'
},
{
text: 'Delete'
},
{
text: 'Mark as Read'
},
{
text: 'Like Message'
}];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Icon only DropDownButton
Icon only DropDownButton can be achieved by using iconCss
property and to hide drop
down arrow e-caret-hide
class is added using cssClass
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
imports: [
DropDownButtonModule
],
standalone: true,
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To render DropDownButton without down arrow. -->
<button ejs-dropdownbutton [items]='items' iconCss='e-icons e-menu' cssClass='e-caret-hide'></button></div>`
})
export class AppComponent {
// Initialize action items.
public items: ItemModel[] = [
{
text: 'New tab'
},
{
text: 'New window'
},
{
text: 'New incognito window'
},
{
separator: true
},
{
text: 'Print'
},
{
text: 'Cast'
},
{
text: 'Find'
}];
}
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 DropDownButton using theiconCss
property.
DropDownButton with sprite image
Sprite images can be loaded in DropDownButton instead of font icons using iconCss
property.
In this following example, e-image
class is added with background url of the sprite image along with X and Y positions. The width
and height
of the element set as 32px
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
imports: [
DropDownButtonModule
],
standalone: true,
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To render DropDownButton with sprite image. -->
<button ejs-dropdownbutton [items]='items' iconCss='e-image' cssClass='e-caret-hide'></button></div>`
})
export class AppComponent {
// Initialize action items.
public items: ItemModel[] = [
{
text: 'Display Settings'
},
{
text: 'System Settings'
},
{
text: 'Additional Settings'
}];
}
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 DropDownButton using theiconCss
property.
Vertical button
Vertical button in DropDownButton can be achieved by adding e-vertical
class
using cssClass
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
imports: [
DropDownButtonModule
],
standalone: true,
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To render Vertical DropDownButton. -->
<button ejs-dropdownbutton [items]='items' content='Message' iconCss='ddb-icons e-message' cssClass='e-vertical' iconPosition='Top'></button></div>`
})
export class AppComponent {
// Initialize action items.
public items: ItemModel[] = [
{
text: 'Edit'
},
{
text: 'Delete'
},
{
text: 'Mark as Read'
},
{
text: 'Like Message'
}];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));