From 3a5fb44d67777c1bb53a9619f5ec26230b2fa354 Mon Sep 17 00:00:00 2001 From: FlayInAHook Date: Mon, 14 Dec 2020 15:25:15 +0100 Subject: [PATCH] changed svg icon in table overview --- src/app/app.component.ts | 10 +++- .../table-overview.component.html | 3 +- src/app/tableLinks.ts | 5 +- src/assets/cargobike.svg | 47 +++++++++++++++++++ src/assets/cargobike2.svg | 47 +++++++++++++++++++ 5 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 src/assets/cargobike.svg create mode 100644 src/assets/cargobike2.svg diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a84bf6c..4d02afa 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,6 +6,8 @@ import { ViewChild } from '@angular/core'; import { MatSidenav } from '@angular/material/sidenav'; import { NavService } from './components/menu-list-item/nav.service'; import { tableLinks } from 'src/app/tableLinks'; +import { MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-root', @@ -28,12 +30,18 @@ export class AppComponent { private themeService: ColorThemeService, private authService: AuthService, private router: Router, - private navService: NavService + private navService: NavService, + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer ) { this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme this.themeService.load(); this.darkThemeIsActive = this.themeService.currentActive() === 'dark-theme'; this.authService.loggedIn.subscribe((value) => (this.loggedIn = value)); + this.matIconRegistry.addSvgIcon( + "cargobike", + this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/cargobike.svg") + ); } changeTheme(event) { diff --git a/src/app/pages/table-overview/table-overview.component.html b/src/app/pages/table-overview/table-overview.component.html index d37fd6b..63f66cc 100644 --- a/src/app/pages/table-overview/table-overview.component.html +++ b/src/app/pages/table-overview/table-overview.component.html @@ -5,7 +5,8 @@ - {{ link.iconName }} + + {{ link.iconName }} {{ link.displayName }} diff --git a/src/app/tableLinks.ts b/src/app/tableLinks.ts index c02e91a..172474f 100644 --- a/src/app/tableLinks.ts +++ b/src/app/tableLinks.ts @@ -2,8 +2,9 @@ export const tableLinks = [ { displayName: 'Lastenräder', - iconName: 'directions_bike', - route: '/table/bikes' + + route: '/table/bikes', + svgIconName: 'cargobike' }, { displayName: 'Aktive', diff --git a/src/assets/cargobike.svg b/src/assets/cargobike.svg new file mode 100644 index 0000000..8a8b934 --- /dev/null +++ b/src/assets/cargobike.svg @@ -0,0 +1,47 @@ + + + + image/svg+xmlOpenclipartCargo Bike (Tricycle)2013-06-20T10:33:47Cargo-Tricycle\nOwn work, released under public domainhttps://openclipart.org/detail/179432/cargo-bike-tricycle-by-joky-179432jokybicyclecargo bicyclecargobikecycle logisticcyclelogisticlastenfahrradlastenradlogistic + + background + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/cargobike2.svg b/src/assets/cargobike2.svg new file mode 100644 index 0000000..8ed207d --- /dev/null +++ b/src/assets/cargobike2.svg @@ -0,0 +1,47 @@ + + + + image/svg+xmlOpenclipartCargo Bike (Tricycle)2013-06-20T10:33:47Cargo-Tricycle\nOwn work, released under public domainhttps://openclipart.org/detail/179432/cargo-bike-tricycle-by-joky-179432jokybicyclecargo bicyclecargobikecycle logisticcyclelogisticlastenfahrradlastenradlogistic + + background + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + \ No newline at end of file