Icon Demo | <uif-icon>

In order for this demo to work you must first build the library in debug mode.

Use the attribute uif-type to specify the icon to display. This must be one of the icons listed on the page: Office UI Fabric - Sytles - Icons.

This markup:
<uif-icon uif-type="arrowDownLeft"></uif-icon>

Renders this:

Modifiers

Change the size & color using standard CSS sizing techniques: style="font-size:32px; color:red;":

Changing the Icon

Selected icon = {{selectedIcon}}
Rendered icon =

Errors When Unsupported Icons Specified

Wouldn't you like to see an error when you specify an icon that's not supported? Open the JavaScript console to see an error for an icon like this:
<uif-icon uif-type="ngOfficeUiFabric"></uif-icon>

Dynamically change type

This markup:
<uif-icon uif-type="{{iconType}}"></uif-icon>

Renders this:
icon type: {{iconType}}: