Logo

src/lib/common-ui.module.ts

@@ -17,6 +17,7 @@ import { IqserButtonsModule } from './buttons';
 import { IqserScrollbarModule } from './scrollbar';
 import { IqserEmptyStatesModule } from './empty-states';
 import { LogPipe } from './utils/pipes/log.pipe';
+import { LogoComponent } from './misc/logo/logo.component';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule];
 const modules = [
@@ -30,7 +31,7 @@ const modules = [
     IqserScrollbarModule,
     IqserEmptyStatesModule
 ];
-const components = [StatusBarComponent, FullPageLoadingIndicatorComponent, FullPageErrorComponent];
+const components = [StatusBarComponent, FullPageLoadingIndicatorComponent, FullPageErrorComponent, LogoComponent];
 const pipes = [SortByPipe, HumanizePipe];
 
 @NgModule({

src/lib/misc/index.ts

@@ -1,2 +1,3 @@
 export * from './status-bar/status-bar.component';
 export * from './status-bar/status-bar-config.model';
+export * from './logo/logo.component';

src/lib/misc/logo/logo.component.html

@@ -0,0 +1 @@
+<mat-icon [svgIcon]="icon"></mat-icon>

src/lib/misc/logo/logo.component.scss

@@ -0,0 +1,8 @@
+:host {
+    color: var(--iqser-primary);
+}
+
+mat-icon {
+    width: 28px;
+    height: 28px;
+}

src/lib/misc/logo/logo.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Required } from '../../utils';
+
+@Component({
+    selector: 'iqser-logo',
+    templateUrl: './logo.component.html',
+    styleUrls: ['./logo.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LogoComponent {
+    @Input() @Required() icon!: string;
+}