Update download icon

Author: OEvgeny

packages/component/src/Attachment/Assets/DownloadIcon.tsx

@@ -6,7 +6,7 @@ import { boolean, number, object, optional, pipe, readonly, string, type InferIn
 
 import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
-import DownloadIcon from './Assets/DownloadIcon';
+import { ComponentIcon } from '../Icon';
 
 const { useByteFormatter, useDirection, useLocalizer } = hooks;
 
@@ -61,12 +61,13 @@ const FileContentBadge = (props: FileContentBadgeProps) => {
         {!!localizedSize && <div className="webchat__fileContent__size">{localizedSize}</div>}
       </div>
       {downloadIcon && (
-        <DownloadIcon
+        <ComponentIcon
+          appearance="text"
           className={classNames(
             'webchat__fileContent__downloadIcon',
             direction === 'rtl' && 'webchat__fileContent__downloadIcon--rtl'
           )}
-          size={1.5}
+          icon="download"
         />
       )}
     </React.Fragment>

packages/component/src/Attachment/FileContent.tsx

@@ -27,7 +27,8 @@ export default function createFileContentStyle({
     },
 
     '& .webchat__fileContent__downloadIcon': {
-      fill: accent,
+      color: accent,
+      fontSize: '33px',
       padding: paddingRegular,
 
       '&:not(.webchat__fileContent__downloadIcon--rtl)': {

packages/component/src/Icon/ComponentIcon.module.css

@@ -220,6 +220,12 @@
   }
 }
 
+:global(.webchat-fluent)
+  .activity-decorator
+  :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__downloadIcon) {
+  color: var(--webchat-colorBrandForegroundLink);
+}
+
 /* Markdown links and citation links */
 :global(.webchat-fluent)
   .activity-decorator