# icon
# Description
A simple HTML generator that appropriately applies a class name to a ``, so as to allow CSS to insert an icon character using a supplied web font.
## Requirements
Each icon you want to represent as a `` 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
``
Example CSS:
```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 `` 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 `` 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 `` in its template.
### Example:
```html
````
#### Live example (if you are viewing this on the live demo site)