add icons to toolbar components

Author: javiert-okta

src/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx

@@ -4,6 +4,7 @@ import {
   CardToolbarButtonComponent,
   CardToolbarButtonComponentProps,
 } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
+import { ClearIcon } from "../../icons/clear/clear-icon";
 
 interface CardToolbarClearButtonComponentProps
   extends Omit<CardToolbarButtonComponentProps, "variant"> {
@@ -16,8 +17,12 @@ export const CardToolbarClearButtonComponent: React.FC<
   const dictionary = getButtonsUiDictionary(languageCode);
 
   return (
-    <CardToolbarButtonComponent {...props} variant="standard">
-      {dictionary.clearButton.label}
+    <CardToolbarButtonComponent
+      {...props}
+      variant="standard"
+      tooltipText={dictionary.clearButton.label}
+    >
+      <ClearIcon />
     </CardToolbarButtonComponent>
   );
 };

src/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx

@@ -4,6 +4,8 @@ import {
   CardToolbarButtonComponentProps,
 } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
 import { getButtonsUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { CopyIcon } from "../../icons/copy/copy-icon";
+import { CheckIcon } from "../../icons/check/check-icon";
 
 interface CardToolbarCopyButtonComponentProps
   extends Omit<PropsWithChildren<CardToolbarButtonComponentProps>, "variant"> {
@@ -15,7 +17,6 @@ export const CardToolbarCopyButtonComponent: React.FC<
   CardToolbarCopyButtonComponentProps
 > = ({ languageCode, value, isDisabled, ...props }) => {
   const dictionary = getButtonsUiDictionary(languageCode);
-
   const [isCopied, setIsCopied] = useState(false);
 
   const resetCopy = () => {
@@ -36,10 +37,13 @@ export const CardToolbarCopyButtonComponent: React.FC<
       onPress={copyValue}
       onBlur={resetCopy}
       variant="standard"
+      tooltipText={
+        isCopied
+          ? dictionary.copyButton.done.label
+          : dictionary.copyButton.idle.label
+      }
     >
-      {isCopied
-        ? dictionary.copyButton.done.label
-        : dictionary.copyButton.idle.label}
+      {isCopied ? <CheckIcon /> : <CopyIcon />}
     </CardToolbarButtonComponent>
   );
 };