Fixed icons

angular.json

@@ -28,6 +28,7 @@
               "src/manifest.webmanifest"
             ],
             "styles": [
+              "./node_modules/bootstrap-scss/bootstrap.scss",
               "./node_modules/leaflet/dist/leaflet.css",
               "src/material-theme.scss",
               "src/styles.scss"

src/app/components/toolbar/toolbar.component.html

@@ -25,17 +25,17 @@
 <ng-template #menuItem let-item let-menu="menu" let-mode="mode">
     <ng-container *ngIf="mode == 'icon' && !item.subMenu">
         <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px"></span>
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
         </button>
     </ng-container>
     <ng-container *ngIf="mode == 'menu' && !item.subMenu">
         <button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px; margin-left: 4px; margin-right: 16px"></span> {{item?.name}}
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
         </button>
     </ng-container>
     <ng-container *ngIf="mode == 'icon' && item.subMenu">
         <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px"></span>
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
         </button>
         <mat-menu #subMenu="matMenu">
             <ng-container *ngFor="let child of item.subMenu">
@@ -45,7 +45,7 @@
     </ng-container>
     <ng-container *ngIf="mode == 'menu' && item.subMenu">
         <button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matMenuTriggerFor]="subMenu">
-            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px; margin-left: 4px; margin-right: 16px"></span> {{item?.name}}
+            <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
         </button>
         <mat-menu #subMenu="matMenu">
             <ng-container *ngFor="let child of item.subMenu">

src/app/views/map/map.component.ts

@@ -7,11 +7,9 @@ import {ToolbarItem} from "../../models/toolbarItem";
 import {flyInRight, flyOutRight} from "../../animations";
 import {ARROW, MapLayers, MapService, MEASURE, WeatherLayers} from "../../services/map.service";
 import {Subscription} from "rxjs";
-import {MarkerComponent} from "../../components/marker/marker.component";
 import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
 import {copyToClipboard} from "../../utils";
 import {ActivatedRoute} from "@angular/router";
-import {CircleComponent} from "../../components/circle/circle.component";
 
 declare const L;
 
@@ -37,9 +35,9 @@ export class MapComponent implements OnInit {
     menu: ToolbarItem[] = [
         {name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
         {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()},
-        {name: 'Circle', faicon: 'far fa-circle', toggle: true, click: () => { this.addCircle(); }},
+        {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => { this.addCircle(); }},
-        {name: 'Square', faicon: 'far fa-square', toggle: true},
+        {name: 'Square', icon: 'crop_square', toggle: true},
-        {name: 'Polygon', faicon: 'fas fa-draw-polygon', toggle: true},
+        {name: 'Polygon', icon: 'details', toggle: true},
         {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
         {name: 'Delete', icon: 'delete', toggle: true},
         {name: 'Map Style', icon: 'terrain', subMenu: [

src/styles.scss

@@ -1,6 +1,3 @@
-@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');
-@import '~bootstrap-scss/bootstrap.scss';
-
 :focus {
   outline: none !important;
 }