Search results

Add font awesome icons in Angular Toolbar component

29 Nov 2021 / 2 minutes to read

You can customize the Toolbar component items by using third-party icons other than the icons available in the Syncfusion library. In the following example, font awesome icons are used as toolbar items.

  • Refer to the third-party reference link. Here, the CDN link of font awesome is referred.
Copied to clipboard
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

The following sample explains how to use font awesome in the toolbar component.

Source
Preview
app.component.ts
index.html
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
selector: 'app-container',
template: `
    <ejs-toolbar>
      <e-items>
      <e-item prefixIcon="fa fa-twitter"></e-item>
      <e-item prefixIcon="fa fa-facebook"></e-item>
      <e-item prefixIcon="fa fa-whatsapp"></e-item>
      <e-item
      template='<button class="e-btn e-tbar-btn"><span><i style="font-size: 3em; color: Tomato" class="e-icons fa fa-twitter"></i></span></button>'></e-item>
      </e-items>
   </ejs-toolbar>`
})

export class AppComponent {

}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toolbar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-container>
        <div id='loader'>LOADING....</div>
    </app-container>
</body>
</html>

We can also use templates for rendering icons based on the requirements.

Customization

The class “e-icons” is used for standardizing the appearance of the icons to fit into toolbar items. If you wish to override the appearance of the icons used, you could do this by using the following set of classes

Use the following CSS to set the color of icons.

Copied to clipboard
.e-toolbar .e-icons {
    color: #e3165b !important;
}

Use the following CSS to set the font size of icons.

Copied to clipboard
.e-toolbar .e-btn .e-icons.e-btn-icon {
    font-size: 14px !important;
}