diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0ffcf8a1..f7c6555c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,6 +8,7 @@ import {
 } from '@igo2/core';
 import { AuthOptions } from '@igo2/auth';
 import { PwaService } from './services/pwa.service';
+import { MatIconRegistry } from '@angular/material/icon';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -31,8 +32,10 @@ export class AppComponent {
     private titleService: Title,
     private metaService: Meta,
     private messageService: MessageService,
-    private pwaService: PwaService
+    private pwaService: PwaService,
+    iconRegistry: MatIconRegistry,
   ) {
+    iconRegistry.registerFontClassAlias('Linearicons-Free', 'lnr');
     this.readTitleConfig();
     this.readThemeConfig();
     this.readDescriptionConfig();
diff --git a/src/index.html b/src/index.html
index 007351a4..07b988a8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,6 +15,8 @@
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
+  
     <!-- inline spinner styles to be able to display spinner right away -->
     <style type="text/css">
       body,
diff --git a/src/styles.scss b/src/styles.scss
index 63d16be8..c40403cf 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -28,3 +28,9 @@ ul,
 ol {
   padding: 2px 1rem;
 }
+
+// Fit Linearicons with the mat-icon
+mat-icon.lnr {
+  font-size: 18px;
+  line-height: 24px;
+}
\ No newline at end of file