[ACA-2064] support custom icons for extensions (#864)

* icon component, custom svg

* split components, fix modules

* simplify code

* universal icon component

* support custom icon registration

* update docs

* test fixes

src/app/components/common/common.module.ts

@@ -34,9 +34,11 @@ import { LibraryStatusColumnComponent } from './library-status-column/library-st
 import { LibraryRoleColumnComponent } from './library-role-column/library-role-column.component';
 import { TrashcanNameColumnComponent } from './trashcan-name-column/trashcan-name-column.component';
 import { DynamicColumnComponent } from './dynamic-column/dynamic-column.component';
+import { IconComponent } from './icon/icon.component';
+import { MatIconModule } from '@angular/material';
 
 @NgModule({
-  imports: [CommonModule, CoreModule.forChild()],
+  imports: [CommonModule, CoreModule.forChild(), MatIconModule],
   declarations: [
     GenericErrorComponent,
     LocationLinkComponent,
@@ -45,7 +47,8 @@ import { DynamicColumnComponent } from './dynamic-column/dynamic-column.componen
     LibraryStatusColumnComponent,
     LibraryRoleColumnComponent,
     TrashcanNameColumnComponent,
-    DynamicColumnComponent
+    DynamicColumnComponent,
+    IconComponent
   ],
   exports: [
     GenericErrorComponent,
@@ -55,7 +58,8 @@ import { DynamicColumnComponent } from './dynamic-column/dynamic-column.componen
     LibraryStatusColumnComponent,
     LibraryRoleColumnComponent,
     TrashcanNameColumnComponent,
-    DynamicColumnComponent
+    DynamicColumnComponent,
+    IconComponent
   ],
   entryComponents: [
     LocationLinkComponent,

src/app/components/common/icon/icon.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngIf="isCustom; else: default">
+  <mat-icon [svgIcon]="value"></mat-icon>
+</ng-container>
+
+<ng-template #default>
+  <mat-icon>{{ value }}</mat-icon>
+</ng-template>

src/app/components/common/icon/icon.component.scss

@@ -0,0 +1,4 @@
+.adf-icon {
+  display: inline-flex;
+  vertical-align: middle;
+}

src/app/components/common/icon/icon.component.ts

@@ -0,0 +1,58 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectionStrategy
+} from '@angular/core';
+
+@Component({
+  selector: 'adf-icon',
+  templateUrl: './icon.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'adf-icon' },
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent {
+  private _value = '';
+  private _isCustom = false;
+
+  get value(): string {
+    return this._value;
+  }
+
+  @Input()
+  set value(value: string) {
+    this._value = value || 'settings';
+    this._isCustom = this._value.includes(':');
+  }
+
+  get isCustom(): boolean {
+    return this._isCustom;
+  }
+}