Refactor icons to not use `React.FC`

[nebula-aac]

See previous open issue here: #224

Needed to open another ticket to track towards making this change for v0.16.0.

React has changes it type definitions which means React.FC will no longer be available to use.

• Update each of the icons to use the appropriate props
  - [ ] Consider using SvgIcon from @mui/material as it has other properties we can benefit from using
• Widen the IconProps to accept sx props from MUI in order to utilize the theme object inline

---

Contributor Guide

• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)

[senthil-athiban]

@nebula-aac Should I refactor all the SVG icons to use the SvgIcon component from mui?

import { SVGProps } from 'react';
import { CARIBBEAN_GREEN_FILL, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
import { SvgIcon } from '@mui/material';

const ColumnIcon = ({
  width = DEFAULT_WIDTH,
  height = DEFAULT_HEIGHT,
  fill = CARIBBEAN_GREEN_FILL,
  ...props
}: SVGProps<SVGSVGElement>) => {
  return (
    <SvgIcon>
      <svg
        width={width}
        height={height}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 -960 960 960"
        fill={fill}
        {...props}
      >
        <path d="M120-200v-560h220v560H120Zm250 0v-560h220v560H370Zm250 0v-560h220v560H620Z" />
      </svg>
    </SvgIcon>
  );
};

export default ColumnIcon;

[nebula-aac]

@senthil-k8s Hello thank you for your question

Initially I considered doing this, because when I was testing it in the open PR I had for testing new changes to move to Next.js 14, there are underlying issues with using the MUI svg api to replace ours, which can't be done all at once, but rather needs to be one by one. So this issue needs to be changed to reflect the possible blockers.