Feat: Using IconFont as an additional icon library #3221 (#7427)

### What problem does this PR solve?
Feat: Using IconFont as an additional icon library #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/icon-font.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@/lib/utils';
+
+type IconFontType = {
+  name: string;
+  className?: string;
+};
+
+export const IconFont = ({ name, className }: IconFontType) => (
+  <svg className={cn('fill-current size-4', className)}>
+    <use xlinkHref={`#icon-${name}`} />
+  </svg>
+);

web/src/components/more-button.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils';
+import { Ellipsis } from 'lucide-react';
+import React from 'react';
+import { Button, ButtonProps } from './ui/button';
+
+export const MoreButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size={size || 'icon'}
+        className={cn('invisible group-hover:visible size-3.5', className)}
+        {...props}
+      >
+        <Ellipsis />
+      </Button>
+    );
+  },
+);