Replaced text for changing views with icons

src/examples/Button/ThreeWayToggle/index.tsx

@@ -3,6 +3,9 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ModelTable from '../../../pages/ModelOfInterest/ModelDisplay/ModelTable';
 import SearchVoiList from '../../../pages/VulnerabilityOfInterest/VoiTable/SearchVoiList';
+import graphIcon from "../../../assets/images/data-flow.png"
+import tableIcon from "../../../assets/images/cells.png"
+import arcIcon from "../../../assets/images/arc.png"
 
 function switchView(viewValue:any, filteredCveReport: any, filterName: any, handleFilterByName: any) {
   switch (viewValue) {
@@ -46,9 +49,9 @@ export default function ThreeWayToggleButton({filteredCveReport, filterName, han
       aria-label="Platform"
       style={{ float: 'right', paddingTop: "2%", paddingRight: "1%"}}
     >
-      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="table">Table</ToggleButton>
-      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="graph">Graph</ToggleButton>
-      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="arc">Arc</ToggleButton>
+      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="table" title='Table view of models'><img style={{ display: "block", width: "17px" }} src={tableIcon} /></ToggleButton>
+      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="graph" title='Force directed graph that show the models and its dependencies'><img style={{ display: "block", width: "17px" }} src={graphIcon} /></ToggleButton>
+      <ToggleButton style={{ color: "black", fontWeight: "bold" }} value="arc" title='Arc graph that shows the dependencies between models, vulnerabilities and projects'><img style={{ display: "block", width: "17px" }} src={arcIcon} /></ToggleButton>
     </ToggleButtonGroup>
     {switchView(view, filteredCveReport, filterName, handleFilterByName)}
     </>