Fixed: UI and Command manager updates

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Components/Icon.js

@@ -7,6 +7,7 @@ import styles from './Icon.css';
 
 function Icon(props) {
   const {
+    containerClassName,
     className,
     name,
     kind,
@@ -16,11 +17,7 @@ function Icon(props) {
     ...otherProps
   } = props;
 
-  if (title && !window.Lidarr.isProduction) {
-    console.error('Icons cannot have a title');
-  }
-
-  return (
+  const icon = (
     <FontAwesomeIcon
       className={classNames(
         className,
@@ -34,9 +31,23 @@ function Icon(props) {
       {...otherProps}
     />
   );
+
+  if (title) {
+    return (
+      <span
+        className={containerClassName}
+        title={title}
+      >
+        {icon}
+      </span>
+    );
+  }
+
+  return icon;
 }
 
 Icon.propTypes = {
+  containerClassName: PropTypes.string,
   className: PropTypes.string,
   name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,

frontend/src/Components/Page/Sidebar/Messages/Message.js

@@ -45,9 +45,10 @@ function Message(props) {
       styles[type]
     )}
     >
-      <div className={styles.iconContainer} title={name}>
+      <div className={styles.iconContainer}>
         <Icon
           name={getIconName(name)}
+          title={name}
         />
       </div>