chitswe / material-letter-icons

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

material-letter-icons

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