packages/ui/src/lib/icon/icon.component.ts
Displays icons by name. If the matching Icon (from registry contains a content, the content is shown.
If not, is is expected to be a ec-icon.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ec-icon |
| styleUrls | ./icon.component.scss |
| templateUrl | ./icon.component.html |
Properties |
Methods |
Inputs |
constructor(iconService: IconService)
|
||||||
|
Parameters :
|
| name | |
Type : string
|
|
|
The name of the icon. An Icon with this name is expected to be present in the current iconService registry. |
|
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| resolve |
resolve()
|
|
The component will resolve the icon from the current iconService registry. A warning is logged if no icon can be found.
Returns :
void
|
| icon |
Type : Symbol
|
|
The resolved icon (by name) |
Displays an icon:
<ec-icon name="add"></ec-icon>ec-icon set uses ixo svg icons. You can see the icon names that are used by the components here. All ixo icons that are NOT used by the components must be defined in your app to have them available. This can be done using IconService and the ixo site.
e.g. if you are using the names add-circle and alarm, you can add them to your icon set like this:
// import { IconService } from '@ec.components/ui';
export class App {
constructor(public iconService: IconService) {
iconsService.set([
{
name: 'add-circle',
path:
'M15 11h-2v-2c0-0.55-0.45-1-1-1s-1 0.45-1 1v2h-2c-0.55 0-1 0.45-1 1s0.45 1 1 1h2v2c0 0.55 0.45 1 1 1s1-0.45 1-1v-2h2c0.55 0 1-0.45 1-1s-0.45-1-1-1zM12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8c4.411 0 8 3.589 8 8s-3.589 8-8 8zM12 2c-5.514 0-10 4.486-10 10s4.486 10 10 10c5.514 0 10-4.486 10-10s-4.486-10-10-10z',
},
{
name: 'alarm',
path:
'M21.24 8.098l-4.24-4.238c0.541-0.531 1.282-0.86 2.099-0.86 1.657 0 3 1.343 3 3 0 0.817-0.329 1.557-0.859 2.098zM2.859 8.098c-0.53-0.541-0.859-1.281-0.859-2.098 0-1.657 1.343-3 3-3 0.817 0 1.558 0.329 2.099 0.86l-4.24 4.238zM15 12c0.552 0 1 0.447 1 1s-0.448 1-1 1h-3c-0.552 0-1-0.447-1-1v-3c0-0.553 0.448-1 1-1s1 0.447 1 1v2h2zM12 20c3.866 0 7-3.134 7-7s-3.134-7-7-7c-3.866 0-7 3.134-7 7s3.134 7 7 7zM12 22c-4.971 0-9-4.029-9-9s4.029-9 9-9c4.971 0 9 4.029 9 9s-4.029 9-9 9z',
},
]);
}
}The path for each icon has to be copied from the ixo site.
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { IconService } from './icon.service';
import { Symbol } from '../symbol/symbol.interface';
/** Displays icons by name. If the matching Icon (from registry contains a content, the content is shown.
* If not, is is expected to be a ec-icon.
* <example-url>https://components.entrecode.de/ui/icons?e=1</example-url>
*/
@Component({
selector: 'ec-icon',
templateUrl: './icon.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['./icon.component.scss'],
})
export class IconComponent implements OnInit, OnChanges {
/** The name of the icon. An Icon with this name is expected to be present in the current iconService registry. */
@Input() name: string;
/** The resolved icon (by name) */
icon: Symbol;
constructor(private iconService: IconService) {}
/** The component will resolve the icon from the current iconService registry. A warning is logged if no icon can be found. */
resolve() {
this.icon = this.iconService.get(this.name);
if (!this.icon) {
console.warn(`Icon ${this.name} cannot be found. Using the following icon registry:`, this.iconService.registry);
}
}
ngOnInit() {
this.resolve();
}
ngOnChanges() {
this.resolve();
}
}
<span *ngIf="icon?.content">{{ icon.content }}</span>
<svg *ngIf="!icon?.content" [id]="icon?.name" class="ixo" viewBox="0 0 24 24">
<path [attr.d]="icon?.path" />
</svg>
./icon.component.scss
:host {
display: flex;
align-items: center;
justify-content: center;
}