Beautiful material style file type icons packaged in a single JavaScript file.

Source of icons is the Material Icon Theme for VS Code. All credit for icon design should go there. This is also the place for placing requests for adding new icons.

Version 1.x of this library was React specific, since 2.0 this library is made to be framework agnostic.

• Zero dependencies.
• Contains 377 unique icons.
• Can automatically select icon based on file name.
• Uses SVG images that can scale to any dimensions.
• All icons are bundled in a single file of about 475 kB minified.
• Although primarily focused on file types used in software development, other common file types are also included.

npm install --save material-file-icons

React:

import { getIcon } from 'material-file-icons';

function FileIcon({ filename, style, className }) {
  return <div 
    style={style}
    className={className}
    dangerouslySetInnerHTML={{ __html: getIcon(filename).svg }}
  />;
}

export default FileIcon;

Vue:

<template>
  <div v-html="svg"></div>
</template>

<script>
  import { getIcon } from 'material-file-icons';
  export default {
    name: "FileIcon",
    props: ["filename"],
    computed: {
      svg: function () {
        return getIcon(this.filename).svg;
      }
    }
  };
</script>

Svelte:

<script>
  import { getIcon } from 'material-file-icons';
  export let filename;
  $: selectedIcon = getIcon(filename);
</script>

<div class={$$props.class} style={$$props.style}>
  {@html selectedIcon.svg}
</div>

The Icon type definition

{
  name: string,               // The name of the icon e.g. 'javascript'.
  svg: string,                // The actual SVG content '<svg ...'.
  extensions: Array<string>?, // List of extensions this Icon should be applied to.
  files: Array<string>?       // List of complete filenames this icon should be applied to.
}

The default file icon.

Returns an icon based on filename input.

Returns an array of all available icons.

MIT