Fix display of material icon

angular.json

@@ -18,7 +18,8 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "allowedCommonJsDependencies": [
-              "moment"
+              "moment",
+              "lottie-web"
             ],
             "outputPath": "dist",
             "index": "src/index.html",

package.json

@@ -28,7 +28,9 @@
     "@blockcore/coininfo": "^5.2.2",
     "@blockcore/dns": "^0.0.11",
     "@blockcore/provider": "^0.0.13",
-    "@fontsource/material-icons": "^5.0.7",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.7",
+    "@fontsource/material-icons-round": "^5.0.7",
+    "@fontsource/roboto": "^5.0.8",
     "jwt-decode": "^3.1.2",
     "ngx-logger": "^5.0.12",
     "rxjs": "~7.8.1",

src/app/features/github/github-page/github.component.html

@@ -1,6 +1,3 @@
-
-
-
 <div *ngFor="let org of setup.github.organizations" class="mb-10">
     <mat-card class="mb-10">
       <mat-card-header>
@@ -15,18 +12,16 @@
         </p>
       </mat-card-content>
       <mat-card-actions align="end" class="gitlogo">
-        <ng-lottie width="90px" height="90px" [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie>
-      </mat-card-actions>
+       </mat-card-actions>
     </mat-card>
 
   <div class="flex-container">
 
     <mat-card *ngFor="let repo of org.repositoris" class="flex-item">
 
       <mat-card-header>
-        <!-- <img mat-card-avatar src="assets/images/github.png" alt="{{org.name}}"> -->
-        <ng-lottie mat-card-avatar width="60px" height="60px" [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie>
-      <mat-card-title> {{repo.name}}</mat-card-title>
+        <img mat-card-avatar src="assets/images/github.png" alt="{{org.name}}">
+       <mat-card-title> {{repo.name}}</mat-card-title>
       <mat-card-subtitle> <span *ngIf="repo.release.exist">version : <a
             [href]="'https://github.com/'+org.login+'/'+repo.name+'/releases'">{{repo.release.version}}</a></span>
       </mat-card-subtitle>

src/app/features/github/github-page/github.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { SetupService } from 'src/app/core/services/setup.service';
+
 import { AnimationItem } from 'lottie-web';
 import { AnimationOptions } from 'ngx-lottie';
+import { SetupService } from 'src/app/core/services/setup.service';
 
 @Component({
   selector: 'app-github',
@@ -18,12 +19,7 @@ export class GithubPageComponent implements OnInit {
   }
 
 
-  options: AnimationOptions = {
-    path: '/assets/animations/github.json',
-  };
-
-  animationCreated(animationItem: AnimationItem): void {
-  }
+
   // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnInit() {
   }

src/app/features/github/github.module.ts

@@ -1,24 +1,19 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SharedModule } from '../../shared/shared.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { GithubPageComponent } from './github-page/github.component';
 import { GithubRoutingModule } from './github-routing.module';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { LottieModule } from 'ngx-lottie';
-import player from 'lottie-web';
-
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
 
 @NgModule({
   declarations: [GithubPageComponent],
   imports: [
-    LottieModule.forRoot({ player: playerFactory }),
-    CommonModule,
+     CommonModule,
     SharedModule,
     GithubRoutingModule,
     FlexLayoutModule
   ]
 })
 export class GithubModule { }
-export function playerFactory() {
-  return player;
-}
+

src/custom-component-themes.scss

@@ -0,0 +1,7 @@
+// src/custom-component-themes.scss
+
+// import custom components themes
+
+// you only have to add additional components here (instead of in every theme class)
+@mixin custom-components-theme($theme) {
+}

src/styles.scss

@@ -1,24 +1,22 @@
-@import "@fontsource/material-icons";
-@import '@angular/material/theming';
-@include mat-core();
-@import "./theme.scss";
+@import "@angular/material/theming";
 
-@include angular-material-theme($theming-material-components-theme);
+@include mat-core();
 
+@import "./theme.scss";
 
+@import "./custom-component-themes.scss";
 
-// Define your primary, accent, and warn colors
-$primary: mat-palette($mat-indigo);
-$accent: mat-palette($mat-pink, A200, A100, A400);
-$warn: mat-palette($mat-red);
+@include angular-material-theme($theming-material-components-theme);
+@include custom-components-theme($theming-material-components-theme);
 
-// Create a theme map
-$theme: mat-light-theme($primary, $accent, $warn);
+@import "@fontsource/roboto/300.css";
+@import "@fontsource/roboto/400.css";
+@import "@fontsource/roboto/500.css";
+@import "@fontsource/roboto/700.css"; // default "bold".
 
-// Include typography and density configurations if needed
+@import "@fontsource/material-icons-round";
 
-// Apply the theme to your application
-@include angular-material-theme($theme);
+@include angular-material-theme($theming-material-components-theme);
 
 .dark {
   @include angular-material-color($dark-theme);
@@ -28,7 +26,13 @@ $theme: mat-light-theme($primary, $accent, $warn);
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-size: 14px;
+  background-color: #303030;
+  color: white;
+  overscroll-behavior-y: contain;
+}
+
+.mat-icon {
+  font-family: "Material Icons Round", sans-serif;
 }
 
 .full-width {
@@ -170,4 +174,4 @@ p .mat-icon {
   to {
     opacity: 1;
   }
-}
+}