Added Icons to ensure stable design between browsers

index.d.ts

 declare module "*.png";
 declare module "*.jpg";
+declare module "*.svg";

src/display/components/search_icon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="search_icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="4.9320698"
+     inkscape:cx="71.977895"
+     inkscape:cy="52.107941"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect3234"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,4.8172043,0,1 @ F,0,0,1,0,6,0,1 @ F,0,0,1,0,0,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="2"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <ellipse
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:9.87419;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path111"
+       cx="46.960567"
+       cy="46.803272"
+       rx="41.023472"
+       ry="40.866177" />
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="rect3232"
+       width="55.890984"
+       height="8.4167461"
+       x="111.04586"
+       y="-4.606051"
+       sodipodi:type="rect"
+       d="m 111.04586,-4.606051 h 51.07378 a 4.8172043,4.8172043 45 0 1 4.8172,4.81720433 4.9475601,4.9475601 149.03946 0 1 -6,3.59954187 l -49.89098,0 z"
+       inkscape:path-effect="#path-effect3234"
+       transform="rotate(45)" />
+  </g>
+</svg>

src/display/components/searchbar.css

@@ -15,10 +15,20 @@
     outline: none;
 }
 
-.searchbar-icon {
+.searchbar-icon-div {
     cursor: pointer;
-    font-size: 30px;
     opacity: 0.7;
+    width: 30px;
+    height: 30px;
+}
+
+.searchbar-icon {
+    max-width: 100%;
+    transition: all 0.5s;
+}
+
+.searchbar-icon-white {
+    filter: invert(100%);
 }
 
 .searchbar-form {

src/display/components/searchbar.tsx

 import React, { useEffect, useRef, useState } from "react";
 
 import "./searchbar.css";
+import searchicon from "./search_icon.svg";
 import { NodeData } from "../../common/graph";
 
 interface SearchBarProps {
@@ -60,8 +61,14 @@ function SearchBar({
             style={{ backgroundColor: isMinified ? "" : "white" }}
         >
             <div className={"searchbar"}>
-                <div className={"searchbar-icon"} onClick={toggleMinified}>
-                    &#128269;
+                <div className={"searchbar-icon-div"} onClick={toggleMinified}>
+                    <img
+                        className={`searchbar-icon ${
+                            isMinified ? "searchbar-icon-white" : ""
+                        }`}
+                        src={searchicon}
+                        alt={"Searchbar"}
+                    />
                 </div>
                 <div></div>
                 <div

src/display/display.css

@@ -25,13 +25,19 @@
     gap: 10px;
     background-color: rgba(150, 150, 150, 0.35);
     border-bottom-right-radius: 20px;
+    transition: all 0.5s;
 }
 
 .display-fullscreen-button {
     pointer-events: all;
     cursor: pointer;
-    font-size: 30px;
-    transform: rotate(-45deg);
-    margin-top: -13px;
-    color: lightgray;
+    opacity: 0.7;
+    width: 30px;
+    height: 30px;
+}
+
+.display-fullscreen-icon {
+    filter: invert(100%);
+    max-width: 100%;
+    padding: 2px;
 }
\ No newline at end of file

src/display/display.tsx

@@ -10,6 +10,7 @@ import { loadGraphJson } from "../common/datasets";
 import NodeInfoBar from "./components/nodeinfo/nodeinfobar";
 import FilterMenu from "./components/nodefilter/filtermenu";
 import SearchBar from "./components/searchbar";
+import expandicon from "./expand_icon.svg";
 
 /**
  * This component manages and renders a 3d-force-graph with additional menus to navigate, filter and view information on nodes.
@@ -121,7 +122,11 @@ class Display extends React.Component<
                         title={"Vollbild"}
                         onClick={this.toggleFullscreen.bind(this)}
                     >
-                        &#10231;
+                        <img
+                            className={"display-fullscreen-icon"}
+                            src={expandicon}
+                            alt={"Toggle Fullscreen"}
+                        />
                     </div>
                     {this.state.graph && (
                         <SearchBar

src/display/expand_icon.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="expand_icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="4.9320698"
+     inkscape:cx="71.977895"
+     inkscape:cy="52.107941"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect3234"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,4.8172043,0,1 @ F,0,0,1,0,6,0,1 @ F,0,0,1,0,0,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="2"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+  </defs>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="path3378">
+      <path
+         style="color:#000000;fill:#000000;fill-rule:evenodd;-inkscape-stroke:none"
+         d="M 109.46289,4.7929687 4.7929687,109.46289 10.902344,115.57227 115.57227,10.902344 Z"
+         id="path9185" />
+      <g
+         id="g9171">
+        <path
+           style="color:#000000;fill:#000000;stroke-linecap:round;-inkscape-stroke:none"
+           d="m 77.388672,2 a 4.3200002,4.3200002 0 0 0 -4.320313,4.3203125 4.3200002,4.3200002 0 0 0 4.320313,4.3203125 h 32.337888 v 32.335937 a 4.3200002,4.3200002 0 0 0 4.31836,4.320313 4.3200002,4.3200002 0 0 0 4.32031,-4.320313 V 2 Z"
+           id="path9179" />
+        <path
+           style="color:#000000;fill:#000000;stroke-linecap:round;-inkscape-stroke:none"
+           d="m 42.976576,118.29491 a 4.3200002,4.3200002 0 0 0 4.320039,-4.31862 4.3200002,4.3200002 0 0 0 -4.320306,-4.32031 l -32.335669,2.7e-4 5e-6,-32.335932 A 4.3200002,4.3200002 0 0 0 6.320333,73 4.3200002,4.3200002 0 0 0 2.000013,77.32032 L 2,118.29491 Z"
+           id="path9173" />
+      </g>
+    </g>
+  </g>
+</svg>