From 74b92f2bbbf0ac6a2c8f573d8f3daa492c37317f Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Sun, 2 Jul 2023 17:21:59 +0200
Subject: [PATCH] enhancement(icon): add title attribute for icons

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
---
 frontend/src/components/common/icons/ui-icon.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/icons/ui-icon.tsx b/frontend/src/components/common/icons/ui-icon.tsx
index 4bfdfac7e..595633faa 100644
--- a/frontend/src/components/common/icons/ui-icon.tsx
+++ b/frontend/src/components/common/icons/ui-icon.tsx
@@ -14,9 +14,19 @@ export interface UiIconProps {
   size?: number | string
   className?: string
   spin?: boolean
+  title?: string
 }
 
-export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spin }) => {
+/**
+ * Renders an icon from react-bootstrap-icons.
+ * @param icon The icon to render
+ * @param nbsp True to render a non-breaking space after the icon
+ * @param className Additional CSS classes to apply to the icon
+ * @param size The size of the icon in em or as a valid width/height CSS value
+ * @param spin True to spin the icon
+ * @param title The title of the icon
+ */
+export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spin, title }) => {
   const finalSize = useMemo(() => {
     if (size === undefined) {
       return '1em'
@@ -35,7 +45,8 @@ export const UiIcon: React.FC<UiIconProps> = ({ icon, nbsp, className, size, spi
         {React.createElement(icon, {
           className: finalClassName,
           width: finalSize,
-          height: finalSize
+          height: finalSize,
+          title
         })}
         {nbsp ? <Fragment>&nbsp;</Fragment> : null}
       </Fragment>