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, whereicon-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, wherematerial
is specifying that thematerial-icons
class should be used, anddashboard
corresponds to a valid icon in the Material icon set. - Add
IconModule
to the NgModuleimports
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>