Using icon for logout button

Author: Bernardo-MG

package-lock.json

@@ -35,6 +35,9 @@
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/router": "^14.1.0",
     "@popperjs/core": "~2.11.0",
+    "@fortawesome/angular-fontawesome": "^0.11.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "bootstrap": "~5.2.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

package.json

@@ -1 +1,3 @@
-<button (click)="onLogout()" [disabled]="!isAbleToLogout()">Logout</button>
+<button (click)="onLogout()" [disabled]="!isAbleToLogout()" type="button" class="btn btn-default" aria-label="Logout">
+    <fa-icon [icon]="logoutIcon"></fa-icon>
+</button>

src/app/login/containers/logout-button/logout-button.component.html

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthenticationService } from '@app/authentication/service/authentication.service';
+import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'logout-button',
@@ -11,6 +12,8 @@ export class LogoutButtonComponent {
 
   private loginUrl = '/login';
 
+  public logoutIcon = faRightFromBracket;
+
   constructor(
     private authenticationService: AuthenticationService,
     private router: Router

src/app/login/containers/logout-button/logout-button.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AuthenticationModule } from '@app/authentication/authentication.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { LoginFormComponent } from './components/login-form/login-form.component';
 import { LogoutButtonComponent } from './containers/logout-button/logout-button.component';
 import { LoginRoutingModule } from './login-routing.module';
@@ -17,6 +18,7 @@ import { LoginViewComponent } from './view/login-view/login-view.component';
   ],
   imports: [
     LoginRoutingModule,
+    FontAwesomeModule,
     AuthenticationModule,
     CommonModule,
     FormsModule,