Angular MDBootstrap Icons

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good-looking webpages with its seamless and easy-to-use component.

In this article, we will know how to use Icons in Angular MDBootstap. Icons are a visual representation of any element which can be a link or some representation.  Angular Bootstrap icons list is more than 1400 Scalable vector icons called Font Awesome which covers multiple topics and use cases. Here, Scalable vector graphics means every icon looks awesome at any size or at any color. It requires fewer compatibility concerns because Font Awesome doesn’t require JavaScript.

Properties:

• icon: It is used to set the icon class.
• size: It is used to set the icon size class.
• classInside: It is used to set the class to the component inside element.

Syntax:

<mdb-icon fab icon="angular"></mdb-icon>

Approach:

• Download Angular MDBootstrap from: https://mdbootstrap.com/docs/angular/getting-started/installation/
• Extract the files and change to working directory.
• Install npm in current project using the following command:

npm install
or
npm install -y

• After creating your project folder i.e. appname, move to it using the following command:

cd appname

• Start the server using the following command:

ng serve

Project Structure: After complete installation, it will look like the following:

Example 1: This is the basic example that illustrates how to use the Icons

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Icons</h4>
    <br />
    <mdb-icon fab icon="angular"
        class="green-text pr-2" size='4x'>
    </mdb-icon>Angular
    <br>
    <mdb-icon fab icon="react"
        class="green-text pr-2" size='4x'>
    </mdb-icon>React
    <br>
    <mdb-icon fab icon="html5"
        class="green-text pr-2" size='4x'>
    </mdb-icon>HTML5
    <br>
    <mdb-icon fab icon="js"
        class="green-text pr-2" size='4x'>
    </mdb-icon>JS
    <br>
    <mdb-icon fab icon="mdb"
        class="green-text pr-2" size='4x'>
    </mdb-icon>MDB
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In this example, we will learn how to add icons in a button.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Icons</h4>
    <br />
    <button type="button" mdbBtn size='sm'
        floating="true" color="blue">
        Angular<mdb-icon fab icon="angular"
            class="green-text pr-2" size='4x'>
        </mdb-icon>
    </button>

    <button type="button" mdbBtn rounded="true"
        size="sm" floating="true" size="sm" color="red">
        React<mdb-icon fab icon="react"
            class="green-text pr-2" size='4x'>
        </mdb-icon>
    </button>

    <button type="button" mdbBtn rounded="true"
        floating="true" size="sm" color="green">
        JavasScript<mdb-icon fab icon="js"
            class="green-text pr-2" size='4x'>
        </mdb-icon>
    </button>

    <br>
    <button type="button" mdbBtn rounded="true"
        floating="true" size="sm" color="grey">
        HTML5<mdb-icon fab icon="html5"
            class="green-text pr-2" size='4x'>
        </mdb-icon>
    </button>

    <button type="button" mdbBtn rounded="true"
        floating="true" size="sm" color="orange">
        MDB<mdb-icon fab icon="mdb"
            class="green-text pr-2" size='4x'>
        </mdb-icon>
    </button>

    <button type="button" mdbBtn rounded="true"
        floating="true" size="sm" color="warning">
        Code<mdb-icon fas icon="code"
            class="green-text pr-2" size='4x'>
        </mdb-icon>
    </button>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: https://mdbootstrap.com/docs/angular/content/icons-usage/