Icons

The inv-icon Angular component incorporates a "best practices" approach for SVG symbol use (particularly, using "(SVG) references" to avoid duplicate SVG markup in the DOM). This sometimes interferes with certain browser/heuristic/markup combinations (like, inv-icon inside anchor (<a>) elements on Chrome/Edge). This can be mitigated by electing to use an icon with an "inlined glyph" (via the inline-glyph= boolean-like (truthy/falsey) literal binding). This avoids the use of references and duplicates the SVG markup in the DOM, mitigating the issue.

Icons

These are the currently available icons in the invision UI system..

HTML

<div ng-controller="IconExampleController as $ctrl">
    <div class="g-iconExample-controlBar">
        <inv-button-bar class="g-iconExample-colorThemeControl"
                        items="$ctrl.viewModel.colorTheme.selections"
                        descriptor="$ctrl.viewModel.colorTheme.descriptor"
                        selected-item="$ctrl.viewModel.colorTheme.current"
                        on-selection-changed="$ctrl.colorThemeSelection_changed">
        </inv-button-bar>

        <inv-button-bar class="g-iconExample-sizePicker"
                        items="$ctrl.viewModel.sizes.semanticSizes"
                        descriptor="$ctrl.viewModel.sizes.descriptor"
                        selected-item="$ctrl.viewModel.sizes.currentSelection"
                        on-selection-changed="$ctrl.sizeSelection_changed">
        </inv-button-bar>
        <input class="g-iconExample-sizeInput"
               type="number"
               ng-model="$ctrl.viewModel.sizes.currentSize"
               ng-change="$ctrl.sizeInput_changed" />
    </div>
    <div class="g-iconExample--containment"
         ng-style="{ 'font-size': $ctrl.viewModel.sizes.currentSize }"
         ng-class="{ 'g-iconExample--dark' : $ctrl.viewModel.colorTheme.current.isDark }">
        <div ng-repeat="icon in $ctrl.viewModel.icons track by icon"
             class="g-iconExample">
            <inv-icon glyph="icon"></inv-icon>
            <div class="g-iconExample-name"
                 ng-bind="::icon"></div>
        </div>
    </div>
</div>

Icon States

Icons are colored to represent their state

HTML

<div class="t-content">
    <h3>Stateful icon classes</h3>
    <div class="g-iconExample--containment">
        <div class="g-iconExample">
            <inv-icon class="c-icon is-error" glyph="'exclamation-circle'"></inv-icon>
            <div class="g-iconExample-name">is-error</div>
        </div>
        <div class="g-iconExample">
            <inv-icon class="c-icon is-warning" glyph="'exclamation-circle'"></inv-icon>
            <div class="g-iconExample-name">is-warning</div>
        </div>
        <div class="g-iconExample">
            <inv-icon class="c-icon is-info" glyph="'exclamation-circle'"></inv-icon>
            <div class="g-iconExample-name">is-info</div>
        </div>
        <div class="g-iconExample">
            <inv-icon class="c-icon is-success" glyph="'exclamation-circle'"></inv-icon>
            <div class="g-iconExample-name">is-success</div>
        </div>
        <div class="g-iconExample">
            <inv-icon class="c-icon is-subtle" glyph="'exclamation-circle'"></inv-icon>
            <div class="g-iconExample-name">is-subtle</div>
        </div>
        <div class="g-iconExample">
            <inv-icon class="c-icon is-running" glyph="'exclamation-circle'"></inv-icon>
            <div class="g-iconExample-name">is-running</div>
        </div>
    </div>
    <br>
    <h3>Handling the glyph not found state:</h3>
    <div class="g-iconExample--containment">
        <inv-icon class="c-icon" glyph="'derp'"></inv-icon>
        <span>No icon will be rendered, and there should be a logged warning about the mis-use of the glyph binding:</span>
    </div>
</div>

Layered Icons

Some icons are comprised of multiple, layered, elements, each individually stylable.

HTML

<div class="g-iconExample--containment">
    <div class="g-iconExample g-iconExample--layered">
        <inv-icon class="g-iconExample-icon--brandPath g-iconExample-icon--whitePolygon" inline-glyph="true" glyph="'layered-plus-cc'"></inv-icon>
        <div class="g-iconExample-name">layered-plus-cc (brand path ("circle"), white polygon ("plus"))</div>
    </div>
    <div class="g-iconExample g-iconExample--layered">
        <inv-icon class="g-iconExample-icon--brandPolygon" inline-glyph="true" glyph="'layered-plus-cc'"></inv-icon>
        <div class="g-iconExample-name">layered-plus-cc (brand polygon ("plus"))</div>
    </div>
</div>

Future Update Icon

Icon to be used to indicate when an entity has future updates. Includes title hover text.

HTML

<div class="t-content">
    <inv-future-update-icon></inv-future-update-icon>
</div>