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 square icons with some initials and black background:

npm install -g material-letter-icons
material-letter-icons generate --chars "EB" --background '#000' --shape 'square' -p

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)
    -p, --pair                generate icon for pair characters (max two characters)
    -b, --background <color>  background color for generated icons (hexadecimal color)
    -s, --shape <shape>       shape for generated icons (square|circle)
    -o, --output <directory>  set output directory

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