mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
/*!
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {DOCUMENT} from '@angular/common';
|
|
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
afterNextRender,
|
|
computed,
|
|
inject,
|
|
signal,
|
|
} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'docs-icon',
|
|
templateUrl: './icon.component.html',
|
|
styleUrl: './icon.component.scss',
|
|
host: {
|
|
'[class]': 'MATERIAL_SYMBOLS_OUTLINED',
|
|
'[style.font-size.px]': 'fontSize()',
|
|
'aria-hidden': 'true',
|
|
'translate': 'no',
|
|
},
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class IconComponent {
|
|
fontSize = computed(() => {
|
|
return IconComponent.isFontLoaded() ? null : 0;
|
|
});
|
|
|
|
protected readonly MATERIAL_SYMBOLS_OUTLINED = 'material-symbols-outlined';
|
|
|
|
private static isFontLoaded = signal(false);
|
|
/** Share the same promise across different instances of the component */
|
|
private static whenFontLoad?: Promise<FontFace[]> | undefined;
|
|
|
|
constructor() {
|
|
if (IconComponent.isFontLoaded()) {
|
|
return;
|
|
}
|
|
|
|
const document = inject(DOCUMENT);
|
|
afterNextRender(async () => {
|
|
IconComponent.whenFontLoad ??= document.fonts.load('normal 1px "Material Symbols Outlined"');
|
|
await IconComponent.whenFontLoad;
|
|
IconComponent.isFontLoaded.set(true);
|
|
});
|
|
}
|
|
}
|