0.8.0 Changelog

This build introduces breaking change. Please read below.

Breaking Changes

3 Changes


1 Bug Fix


Dec 22, 2016


  • clarity-angular is AoT ready

    Clarity-Angular now supports Ahead-of-Time (AoT) compilation. Starting with 0.8.0, the clarity-angular npm package contains the files in es5 es2015 format that can be compiled with ngc compiler. In addition, the package contains clarity-angular.umd.js file. If your application is setup using systemJS, please update your systemJS configuration to point to the clarity-angular.umd.js file as shown in the README.

  • ClarityIcons API released

    As part of 0.8.0, we have created a publically accessible API for customizing the Clarity Icons library in your application. At a high level, `ClarityIcons` is now a namespace off of the browser `window` object. More documentation is coming soon! So make sure to keep an eye on our documentation.

  • Adding your own icons to ClarityIcons

    Using the newly released ClarityIcons API, you can now add your own icons to the publically available ClarityIcons architecture. Use the following call to add your icon to our library in your application:

    ClarityIcons.add({"shapeNameGoesHere": "<svg ... >[your SVG code goes here]</svg>"});

    This API method will assign your SVG markup to the named shape you sent it. It can then be retrieved like in your application like any other icon in the ClarityIcons library.

    <clr-icon shape="shapeNameGoesHere"></clr-icon>
  • Creating custom aliases for ClarityIcons

    You can now create aliases for the icons in your application with a single API call:

    ClarityIcons.alias({"bell": ["alarm", "oh-noehz"]});

    The above alias method call will assign "alarm" and "oh-noehz" names to the existing "bell" icon shape. Now you can use the "bell" icon with any of the new names you have assigned it.

    <clr-icon shape="bell"></clr-icon>
    <clr-icon shape="alarm"></clr-icon>
    <clr-icon shape="oh-noehz"></clr-icon>
  • Added new icons in Clarity Icons

    Clarity Icons now includes new icon shapes such as half-star, circle-check, and storage.

  • Implemented variant icons for existing icon set

    The architecture introduced in 0.7.5 to allow for solid, badged, and alerted icon variants has been extended to all applicable icons in Clarity.

    Use the following classnames with your clr-icon elements.

    <clr-icon shape="..."></clr-icon>
    <clr-icon shape="..." class="has-badge"></clr-icon>
    <clr-icon shape="..." class="has-badge--success"></clr-icon>
    <clr-icon shape="..." class="has-badge--error"></clr-icon>
    <clr-icon shape="..." class="has-badge--info"></clr-icon>
    <clr-icon shape="..." class="has-alert"></clr-icon>
    <clr-icon shape="..." class="is-solid"></clr-icon>
    <clr-icon shape="..." class="is-solid has-badge--success"></clr-icon>
    <clr-icon shape="..." class="is-solid has-badge--error"></clr-icon>
    <clr-icon shape="..." class="is-solid has-badge--info"></clr-icon>
    <clr-icon shape="..." class="is-solid has-alert"></clr-icon>

    Check out our icon documentation for more.

  • Added forRoot() and forChild() to ClarityModule

    Added forRoot() and forChild() methods on ClarityModule to prevent reimport of services in lazy loaded feature modules. Click here for more information. Clarity Module should now be imported as follows:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ClarityModule } from 'clarity-angular';
    import { AppComponent } from './app.component';
        imports: [
            declarations: [ AppComponent ],
            bootstrap: [ AppComponent ]
    export class AppModule {    }

Bug Fixes

  • Upgraded Clarity font to Metropolis Release 8 and removed subsetting to support latin extended characters.

Other Changes

  • Added Icon Buttons Demo to the documentation


  • Following card classes are no longer supported:
    • .card-subtitle
    • .group
    • .icon
    • .description
    • .title
    • .card-link
    • .card-overflow-menu
  • We have removed deprecated classes from Clarity Icons. This includes:
    • icon-color-* style color classes
    • icon-orientation-* style direction classes
    • icon-size-* style size classes
    If you are still using these deprecated classes, please switch to the current styling rules our Clarity Icons documentation.