Icon
Usage
The <go-icon>
component should be the only way an icon is displayed in the app.
Bindings
string;
() iconModifier: 'light' | 'dark' | 'positive' | 'negative' | 'neutral';
() iconClass: string;
() icon: 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
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
Modified
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
Wait!
Overriding Icon Styles
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 Facetoys Toys