menu

Icon

Usage

content_copy

The <go-icon> component should be the only way an icon is displayed in the app.

Bindings

@Input() icon: string; @Input() iconModifier: 'light' | 'dark' | 'positive' | 'negative' | 'neutral'; @Input() iconClass: string;

icon - (required)

The icon binding must be passed. This component requires the Material Icons Font to be included in the application. To use, just pass the name of the icon to this binding.

See the Material Design System Icons page for available icons.

See the full Material Icons Developer Guide for more information.

iconModifier

The iconModifier binding accepts a value of 'light', 'dark', 'positive', 'negative', or 'neutral' and will modify the icon color. The icon will inherit its color otherwise.

iconClass

The iconClass binding can be used to add additional classes directly on to the icon element inside of the component. This becomes useful when implementing icons inside of other components and especially when following the BEM methodology This allows us to hand off the responsibility of modifying the icons to the thing that is implementing them.

Basic

content_copy

Code

<go-icon icon="home"></go-icon> <go-icon icon="delete"></go-icon> <go-icon icon="info"></go-icon> <go-icon icon="done_all"></go-icon>

View

home delete info done_all

Modified

content_copy

Code

<go-icon icon="home" iconModifier="light" class="dark-example-area"></go-icon> <go-icon icon="home" iconModifier="dark"></go-icon> <go-icon icon="check" iconModifier="positive"></go-icon> <go-icon icon="close" iconModifier="negative"></go-icon> <go-icon icon="help" iconModifier="neutral"></go-icon>

View

home home check close help
priority_high

Wait!

You most likely will never need to perform an override like the one shown below. This functionality goes against the guidelines Angular sets, but we've included it just in case this is absolutely necessary. If possible, apply a class directly to the element before performing this override.

Overriding Icon Styles

content_copy

component.scss

.list { line-height: 4rem; list-style: none; } :host ::ng-deep .list__icon { font-size: 4rem; vertical-align: middle; }

component.html

<ul class="list"> <li> <go-icon icon="face" iconClass="list__icon" iconModifier="positive"></go-icon> Face </li> <li> <go-icon icon="toys" iconClass="list__icon"></go-icon> Toys </li> </ul>

View

  • face Face
  • toys Toys