projects/tl-elements/src/lib/tl-icon/tl-icon.component.ts
| changeDetection | ChangeDetectionStrategy.Default |
| selector | tl-icon-component |
| styleUrls | ./tl-icon.component.scss |
| templateUrl | ./tl-icon.component.html |
Properties |
Inputs |
HostBindings |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| color | |
Type : any
|
|
|
Used to define the color for icon component. |
|
| name | |
Type : string
|
|
Default value : 'tamu-logo'
|
|
|
Used to define the name for icon component. |
|
| set | |
Type : string
|
|
Default value : 'tl'
|
|
|
Used to define the icon set. |
|
| size | |
Type : any
|
|
|
Used to define the size for icon component. |
|
| inheritFontStyle | |
Type : "true" | "false"
|
|
|
Inherited from
TamuAbstractBaseComponent
|
|
|
Defined in
TamuAbstractBaseComponent:14
|
|
| style.--tl-font-family-sans-serif |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| style.--tl-font-size |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
| _fontFamily |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
Decorators :
@HostBinding('style.--tl-font-family-sans-serif')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| _fontSize |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
Decorators :
@HostBinding('style.--tl-font-size')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
@Component({
selector: 'tl-icon-component',
templateUrl: './tl-icon.component.html',
styleUrls: ['./tl-icon.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class TlIconComponent extends TamuAbstractBaseComponent {
/** Used to define the icon set. */
@Input() set = 'tl';
/** Used to define the name for icon component. */
@Input() name = 'tamu-logo';
/** Used to define the color for icon component. */
@Input() color;
/** Used to define the size for icon component. */
@Input() size;
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
}
<tl-icon-wrapper #animationRoot>
<wvr-icon-component
[color]="color"
[name]="name"
[set]="set"
[size]="size">
</wvr-icon-component>
</tl-icon-wrapper>
./tl-icon.component.scss
@import "../shared/styles/tl-variables.scss";
:host {
tl-icon-wrapper {
display: inline-block;
margin-left: 5px;
}
wvr-icon-component {
--wvr-icon-color: inherit;
--wvr-icon-size: inherit;
}
}