Replace with info icons

packages/remark-attachment-refs/src/client/components/AttachmentList.tsx

@@ -28,7 +28,7 @@ export const AttachmentList = ({
     return (
       <div className="text-muted">
         <small>
-          <i className="fa fa-fw fa-info-circle" aria-hidden="true"></i>
+          <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">info</span>
           {
             refsContext.options?.prefix != null
               ? `${refsContext.options.prefix} and descendant pages have no attachments`

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -137,7 +137,7 @@ LsxSubstance.displayName = 'LsxSubstance';
 const LsxDisabled = React.memo((): JSX.Element => {
   return (
     <div className="text-muted">
-      <i className="fa fa-fw fa-info-circle"></i>
+      <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">info</span>
       <small>lsx is not available on the share link page</small>
     </div>
   );

packages/remark-lsx/src/client/components/LsxPageList/LsxListView.tsx

@@ -27,7 +27,7 @@ export const LsxListView = React.memo((props: Props): JSX.Element => {
       return (
         <div className="text-muted">
           <small>
-            <i className="fa fa-fw fa-info-circle" aria-hidden="true"></i>
+            <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">info</span>
             $lsx(<a href={lsxContext.pagePath}>{lsxContext.pagePath}</a>) has no contents
           </small>
         </div>