feat(badge): material extended icons sample

IgniteUI · Jul 19, 2023 · 93cb7d8 · 93cb7d8
1 parent a015ea6
commit 93cb7d8
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 0 deletions.
diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts
@@ -8,6 +8,18 @@ export class BadgeConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
+        // badge icon sample
+        configs.push(new Config({
+            component: 'BadgeIconComponent',
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxBadgeModule', 'IgxAvatarModule', 'BadgeIconComponent'],
+                ngDeclarations: ['BadgeIconComponent'],
+                ngImports: ['IgxBadgeModule', 'IgxAvatarModule']
+            }),
+            shortenComponentPathBy: "/data-display/badge/"
+        }));
+
         // badge sample 2
         configs.push(new Config({
             component: 'BadgeSample2Component',

diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.html b/src/app/data-display/badge/badge-icon/badge-icon.component.html
@@ -0,0 +1,4 @@
+<div class="wrapper">
+    <igx-avatar icon="face" size="small" shape="rounded"></igx-avatar>
+    <igx-badge type="error" icon="heart-monitor" iconSet="imx-icons"></igx-badge>
+</div>
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss
@@ -0,0 +1,10 @@
+.wrapper {
+    position: relative;
+    margin-top: 15px;
+}
+
+igx-badge {
+  position: absolute;
+  bottom: 0;
+  left: 28px;
+}
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.ts b/src/app/data-display/badge/badge-icon/badge-icon.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { heartMonitor } from '@igniteui/material-icons-extended';
+import { IgxIconService } from 'igniteui-angular';
+
+@Component({
+  selector: 'app-badge-icon',
+  styleUrls: ['./badge-icon.component.scss'],
+  templateUrl: './badge-icon.component.html'
+})
+export class BadgeIconComponent implements OnInit { 
+    constructor (protected _iconService: IgxIconService) {}
+
+    public ngOnInit() {
+        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
+    }
+}
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
@@ -1,6 +1,7 @@
 /*eslint-disable*/
 
 export const dataDisplayRoutesData = {
+    "badge-icon": { displayName: "Badge Icon Sample", parentName: "Badge" },
     "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" },
     "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" },
     "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },

diff --git a/src/app/data-display/data-display-routing.module.ts b/src/app/data-display/data-display-routing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
 import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component';
 import {
@@ -52,6 +53,11 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
 import { MaterialIconsExtendedComponent } from './icon/material-icons-extended/material-icons-extended.component';
 
 export const dataDisplayRoutes: Routes = [
+    {
+        component: BadgeIconComponent,
+        data: dataDisplayRoutesData['badge-icon'],
+        path: 'badge-icon'
+    },
     {
         component: BadgeSample2Component,
         data: dataDisplayRoutesData['badge-sample-2'],

diff --git a/src/app/data-display/data-display.module.ts b/src/app/data-display/data-display.module.ts
@@ -23,6 +23,7 @@ import {
     IgxTextSelectionModule,
     IgxToastModule
 } from 'igniteui-angular';
+import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component';
 import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component';
 import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component';
 import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component';
@@ -73,6 +74,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo
     declarations: [
         DisplayFormatPipe,
         InputFormatPipe,
+        BadgeIconComponent,
         BadgeSample2Component,
         BadgeSample3Component,
         BadgeStylingSampleComponent,