import { FC } from 'react'

import { SvgIcon, SvgIconProps } from '@mui/material'

const OutlinedEditIcon: FC<SvgIconProps> = ({ sx, ...props }) => (
  <SvgIcon sx={{ fontSize: 24, color: 'grey.600', ...sx }} {...props}>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path
        d="M17.3327 5.21314L15.4993 3.3798C15.2493 3.1298 14.8327 2.96313 14.4993 2.96313C14.0827 2.96313 13.7493 3.1298 13.4993 3.3798L2.33268 14.4631C2.08268 14.7131 1.91602 15.1298 1.91602 15.4631V18.2131C1.91602 18.5465 2.16602 18.8798 2.58268 18.8798H5.33268C5.74935 18.8798 6.08268 18.7131 6.33268 18.4631L17.3327 7.29647C17.5827 7.04647 17.7493 6.6298 17.7493 6.29647C17.7493 5.96313 17.666 5.54647 17.3327 5.21314ZM5.33268 17.5465C5.33268 17.5465 5.24935 17.6298 5.16602 17.6298H3.16602V15.5465C3.16602 15.4631 3.16602 15.4631 3.24935 15.3798L11.5827 6.96314L13.7493 9.1298L5.33268 17.5465ZM16.4993 6.3798L14.666 8.21314L12.4993 6.04647L14.3327 4.21313C14.416 4.1298 14.416 4.1298 14.4993 4.1298C14.4993 4.1298 14.5827 4.1298 14.666 4.21313L16.5827 6.1298C16.666 6.21313 16.666 6.21313 16.666 6.29647C16.4993 6.29647 16.4993 6.3798 16.4993 6.3798Z"
        fill="currentColor"
      />
    </svg>
  </SvgIcon>
)

export default OutlinedEditIcon
