Replace picture icons and image icons

apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -20,7 +20,7 @@ import styles from './DeleteAttachmentModal.module.scss';
 const logger = loggerFactory('growi:attachmentDelete');
 
 const iconByFormat = (format: string): string => {
-  return format.match(/image\/.+/i) ? 'icon-picture' : 'icon-doc';
+  return format.match(/image\/.+/i) ? 'image' : 'description';
 };
 
 export const DeleteAttachmentModal: React.FC = () => {
@@ -73,7 +73,7 @@ export const DeleteAttachmentModal: React.FC = () => {
     return (
       <div className="attachment-delete-image">
         <p>
-          <i className={iconByFormat(attachment.fileFormat)}></i> {attachment.originalName}
+          <span className="material-symbols-outlined">{iconByFormat(attachment.fileFormat)}</span> {attachment.originalName}
         </p>
         <p>
           uploaded by <UserPicture user={attachment.creator} size="sm"></UserPicture> <Username user={attachment.creator as IUser}></Username>

packages/ui/src/components/Attachment.tsx

@@ -22,7 +22,7 @@ export const Attachment = (props: AttachmentProps): JSX.Element => {
     }
   };
 
-  const formatIcon = (attachment.fileFormat.match(/image\/.+/i)) ? 'icon-picture' : 'icon-doc';
+  const formatIcon = (attachment.fileFormat.match(/image\/.+/i)) ? 'image' : 'description';
   const btnDownload = (isUserLoggedIn)
     ? (
       <a className="attachment-download" href={attachment.downloadPathProxied}>
@@ -49,7 +49,7 @@ export const Attachment = (props: AttachmentProps): JSX.Element => {
         <UserPicture user={attachment.creator} size="sm"></UserPicture>
       </span>
       <a className="me-2" href={attachment.filePathProxied} target="_blank" rel="noopener noreferrer">
-        <i className={formatIcon}></i> {attachment.originalName}
+        <span className="material-symbols-outlined ms-1">{formatIcon}</span> {attachment.originalName}
       </a>
       <span className="me-2">{fileType}</span>
       <span className="me-2">{createdAt}</span>