mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00

2023-01-02 14:00:01 +00:00

2.1 KiB

Raw Permalink Blame History

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Icon Component	v3.0.0	Active	2019-02-08

Icon Component

Provides a universal way of rendering registered and named icons.

Basic usage

<!-- Font ligature -->
<adf-icon value="alert"></adf-icon>

<!-- ADF Thumbnail Service -->
<adf-icon value="image/png"></adf-icon>

<!-- Custom icon from MatIconRegistry -->
<adf-icon value="my-company:my-icon"></adf-icon>

Class members

Properties

Name	Type	Default value	Description
color	`ThemePalette`		Theme color palette for the component.
value	`string`		Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`.

Details

You can register custom SVG files as named icons in the format [namespace]:[name].

The example below shows how to register a new icon named adf:move_file that points to an external file within the assets folder:

import { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({...})
export class AppComponent implements OnInit {

    constructor(
        private matIconRegistry: MatIconRegistry,
        private sanitizer: DomSanitizer
    ) {}

    ngOnInit() {
        this.matIconRegistry.addSvgIconInNamespace(
            'adf',
            'move_file',
            this.sanitizer.bypassSecurityTrustResourceUrl(
                './assets/images/adf-move-file-24px.svg'
            )
        );
    }
}

In the HTML, you can now use the icon as shown below:

<adf-icon value="adf:move_file"></adf-icon>

Thumbnail Service

You can also reference the icons registered with the Thumbnail Service using the adf: namespace.

<adf-icon value="adf:image/gif"></adf-icon>

2.1 KiB Raw Permalink Blame History