Bug fix: exception when icon does not exist. (#179)

* Bug fix: exception when icon does not exist.

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED] - YYYY-MM-DD
 
+### Fixed
+
+- [#177](https://github.com/equinor/webviz-core-components/pull/177) - Bug fix: Menu missing if using non-existent icon.
 
 ## [0.5.2] - 2021-10-08
 

react/src/lib/components/Menu/components/Icon/Icon.tsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import * as edsIcons from "@equinor/eds-icons";
 import { IconData } from "@equinor/eds-icons";
 import { Icon as EdsIcon } from "@equinor/eds-core-react";
+import { Tooltip } from "@material-ui/core";
 
 type IconProps = {
     icon: string;
@@ -16,6 +17,25 @@ export const Icon: React.FC<IconProps> = (props) => {
         icon = Object.values(edsIcons).find((el) => el.name === props.icon);
     }
 
+    if (!icon) {
+        return (
+            <Tooltip
+                title={
+                    `An icon with name "${props.icon}" does not exist.` +
+                    ` Please check the icon name for typos. ` +
+                    `An overview of all available icons can be found at ` +
+                    `https://eds.equinor.com/assets/system-icons/library/.`
+                }
+            >
+                <EdsIcon
+                    data={edsIcons.report}
+                    color="hsla(0, 100%, 50%, 1)"
+                    className={(props.className || "") + " Menu__IconNotFound"}
+                />
+            </Tooltip>
+        );
+    }
+
     return (
         <EdsIcon
             data={icon}

react/src/lib/components/Menu/components/Section/Section.css

@@ -7,7 +7,7 @@
     flex-direction: row;
 }
 
-.Menu__SectionTitle > svg * {
+.Menu__SectionTitle > svg:not(.Menu__IconNotFound) * {
     fill: #007079;
 }