Icons for well-known and widespread applications

[Nefcanto]

Summary

I'm using Material UI for all of my panel icons. I wanted to create a feature called Export to Excel. I did not find an icon representing Excel. or spreadsheet in general.

Please add icons for well-known apps. Or if that's not feasible, add icons for well-known app ideas at least.

1. Spreadsheet
2. Presentation
3. Document editor
4. PDF
5. ...

Examples

No response

Motivation

No response

Search keywords: excel

[siriwatknp]

Meanwhile, you can use icons from other resources too. For example, here is a PDF icon:

import SvgIcon from '@mui/material/SvgIcon';

<SvgIcon>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 464l48 0 0 48-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 304l-48 0 0-144-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z"/></svg>
</SvgIcon>

You can pass a random <svg> to Material UI SvgIcon to use the same styles as @mui/icons-material

[Nefcanto]

@siriwatknp, thank you. I tried that. It's apparent that this icon is not from the same icon set.

[caweidmann]

Would love to see an icon for PDF. There are so many apps I build that have "Download PDF" or "View PDF" logic...

[caweidmann]

This is what I came up with now for a PDF icon, it's not perfect but it kinda works...

Implementation:

// IconPdf.tsx
import { InsertDriveFileOutlined } from '@mui/icons-material'
import { Box, Typography } from '@mui/material'
import type { SvgIconProps } from '@mui/material'

const Component = ({ ...rest }: SvgIconProps) => {
  const fs =
    rest?.sx && typeof rest.sx === 'object' && !Array.isArray(rest.sx) && 'fontSize' in rest.sx
      ? rest.sx.fontSize
      : undefined

  if (!fs || typeof fs !== 'number') {
    throw new Error('IconPdf requires fontSize as a number in sx prop')
  }

  return (
    <Box component="span" sx={{ display: 'inline-flex', position: 'relative' }}>
      <InsertDriveFileOutlined {...rest} />
      <Typography
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -20%)',
          fontSize: fs / 4,
          fontWeight: 'bold',
          lineHeight: 1,
        }}
      >
        PDF
      </Typography>
    </Box>
  )
}

export default Component

Usage:

<IconPdf sx={{ fontSize: 24 }} />