MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.
En este artículo, sabremos cómo usar iconos en Angular MDBootstap. Los iconos son una representación visual de cualquier elemento que puede ser un enlace o alguna representación. s
Propiedades:
- icon: Se utiliza para establecer la clase de icono.
- tamaño: Se utiliza para establecer la clase de tamaño del icono.
- classInside: se utiliza para establecer la clase en el elemento interior del componente.
Sintaxis:
<mdb-icon fab icon="angular"></mdb-icon>
Acercarse:
- Descargue Angular MDBootstrap desde: https://mdbootstrap.com/docs/angular/getting-started/installation/
- Extraiga los archivos y cambie al directorio de trabajo.
- Instale npm en el proyecto actual usando el siguiente comando:
npm install or npm install -y
- Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:
cd appname
- Inicie el servidor con el siguiente comando:
ng serve
Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:
Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar los iconos
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 { }
Producción:
Ejemplo 2: En este ejemplo, aprenderemos cómo agregar íconos en un botón.
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 { }
Producción:
Referencia: https://mdbootstrap.com/docs/angular/content/icons-usage/