NgSanLetterIcon

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

Demo

Usage

This assumes you already have an angular project setup

• Run the following commands to setup NgSanLetterIcon:

npm install -S ng-san-letter-icon

Add the NgSanLetterIconModule to your module ie. AppModule

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {NgSanLetterIconModule} from 'ng-san-letter-icon';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		NgSanLetterIconModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule {
}

Use the san-letter-icon in your components

<san-letter-icon
	[words]="'Some Name'"
	[backgroundColor]="'#444444'"
	[numberOfCharactersPerWord]="2">
</san-letter-icon>

Options:

• words

  This is a string of words from which letters will be extracted

• backgroundColor Optional

  Background Color of the icon

  • Defaults to #a100ff

• color Optional

  Color of the letter icon

  • Defaults to #ffffff

• numberOfCharactersPerWord

  • This takes in the number of characters to extract from each word.
  • it defaults to 1 character. It can only take in either of the two values 1 or 2
  • If the number of words are more that 1, it will take the default value 1.

• wordIndex Optional

  Specify a word you want to extract characters form in case its a string of more than one word

• characterPosition

  The position in the word from where to start character extraction, It defaults to position/index 0, the first character

• strokeWidth

  The border width of the circle, defaults to null

• strokeColor

  The border color, defaults to null

License

Apache 2.0