material-letter-icons

Generates generic, single-letter icons styled according to the Material Design colors and guidelines, similar to Gmail's fallback sender icons.

Usage no npm install needed!

<script type="module">
  import materialLetterIcons from 'https://cdn.skypack.dev/material-letter-icons';
</script>

README

material-letter-icons

npm version

Generates generic, single-letter icons styled according to the Material Design colors and guidelines, similar to Gmail's fallback sender icons, using:

  • Roboto Light - to display the letters using the official Material Design typeface
  • material-colors - to provide a Material Design colored background for the icons
  • svg2png - to convert the generated .svg icon files to .png format using PhantomJS

Demo

Usage

The icons are pre-generated in .png and .svg format within the dist/ directory.

Generate Custom Icons

  • Install the dependencies/Roboto-Light.ttf font as a system-wide font, and make sure that Light is the only Roboto font weight you have installed. Unfortunately, it can't be bundled within the base.svg due to a bug with PhantomJS.

  • Run the following commands to generate icons for custom characters:

npm install -g material-letter-icons
material-letter-icons generate --chars '$#@'

Command Line Options

material-letter-icons --help

  Usage: material-letter-icons [options]

  Options:

    -h, --help         output usage information
    -V, --version      output the version number
    -c, --chars <$#@>  generate icons for custom characters (no seperator)

Troubleshooting

EACCES - Permission Denied

You probably don't have write access to your global node_modules folder. Work around this error by prefixing the commands with sudo, or check out fixing npm permissions to chown those directories.

License

Apache 2.0