WIP

src/app/games/massive-darkness2/md2-icon/md2-icon.component.html

@@ -1 +1 @@
-<span class="MD2Icon {{iconName}} {{iconClass}} {{sizeClass}}"></span>
+<span [innerHtml]="iconHtml" class="g-font-size-20 g-line-height-0 mx-2"></span>

src/app/games/massive-darkness2/md2-icon/md2-icon.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { MD2Icon } from '../massive-darkness2.model';
+import { MD2StateService } from '../../../services/MD2/md2-state.service';
 
 @Component({
   selector: 'md2-icon',
@@ -10,13 +11,17 @@ export class MD2IconComponent implements OnInit {
 
   @Input() iconClass: string = 'mr-1';
 
-
+  iconHtml: string;
   private _icon: string | MD2Icon;
 
   @Input() public set icon(v: string | MD2Icon) {
     if (this._icon != v) {
       this._icon = v;
-
+      //if it's string, convert it to MD2Icon
+      if (typeof v === 'string') {
+        v = MD2Icon[v];
+      }
+      this.iconHtml = this.md2StateService.iconHtml(v as MD2Icon);
     }
     if (this.isMD2Icon(v)) {
       this.iconName = MD2Icon[v].toLowerCase();
@@ -30,7 +35,7 @@ export class MD2IconComponent implements OnInit {
   }
   @Input() size: string = 'sm';
   iconName: string;
-  constructor() { }
+  constructor(private md2StateService: MD2StateService) { }
 
   ngOnInit(): void {
   }