Skip to content
Generates generic, single-letter icons styled according to the Material Design colors and guidelines, similar to Gmail's fallback sender icons.
Branch: master
Clone or download
Latest commit f425b38 Apr 1, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dependencies
dist
lib Update svg2png for macOS Sierra compatibility Apr 1, 2017
src/svg Set font-weight to 300 for Roboto-Light (albeit having no affect) Jan 15, 2016
.gitignore
LICENSE
README.md
config.js
index.js
package.json

README.md

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

You can’t perform that action at this time.