icon

Description

A simple HTML generator that appropriately applies a class name to a <span>, so as to allow CSS to insert an icon character using a supplied web font.

Requirements

Each icon you want to represent as a <va-icon> element must be available as CSS class name in the styles available to the page when it's rendered in the browser.

This typically means ensuring your HTML document is loading a CSS file that loads a font stack and maps each character to a class, with a …:before {content: …} style rule for each icon class. If you are using the material icons by using the material prefix, you should link the font from Google via their recommended link <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Example CSS:

@font-face {
  font-family: 'fec-icons';
  src: url("../fonts/icons_1465248177255.eot"); }

.fec-icon:before {
  display: inline-block;
  font-family: 'fec-icons'; }

.fec-icon-pdf:before {
  content: '\E018'; }

.fec-icon-phone:before {
  content: '\E019'; }

Usage

When rendered, the component provides a span with class attribute set for the icon set. The icon name will also be in the class if using Vendasta icons, or the content of the span if using Material icons.

• Use <va-icon [iconClass]="'icon-pdf'"></va-icon> in your component or app template markup, where icon-pdf is any icon class in your loaded Vendasta styles.
• If using material icons directly, use <va-icon [iconClass]="'material:dashboard'"></va-icon> in your component or app template markup, where material is specifying that the material-icons class should be used, and dashboard corresponds to a valid icon in the Material icon set.
• Add IconModule to the NgModule imports in whichever Angular2 module wil be using <va-icon> in its template.

Example:

<va-icon [iconClass]="'icon-pdf'"></va-icon>
<va-icon [iconClass]="'material:dashboard'"></va-icon>

Live example (if you are viewing this on the live demo site)