Search results

Create ButtonGroup with icons in Angular ButtonGroup component

22 Jul 2021 / 1 minute to read

To create ButtonGroup with icons, iconCss property of the button component can be used.

The following example illustrates how to create ButtonGroup with icons.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To render ButtonGroup. -->
               <div class='e-btn-group'>
                  <button ejs-button iconCss='e-icons e-left-icon'>Left</button>
                  <button ejs-button iconCss='e-icons e-middle-icon'>Right</button>
                  <button ejs-button iconCss='e-icons e-right-icon'>Middle</button>
                </div>`
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

.e-left-icon::before {
    content: '\e33a';
}

.e-right-icon::before {
    content: '\e34d';
}

.e-middle-icon::before {
    content: '\e35e';
}