From 2b7d59b1a3901af14a897671c283624e6de2f9c7 Mon Sep 17 00:00:00 2001
From: sam marshall <s.marshall@open.ac.uk>
Date: Wed, 27 Mar 2019 14:27:58 +0000
Subject: [PATCH] MOBILE-2940 core-icon: label does not work on Ionic icons

---
 src/components/icon/core-icon.html |  2 +-
 src/components/icon/icon.ts        | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/core-icon.html b/src/components/icon/core-icon.html
index 8e4a85f3a..7c89b545c 100644
--- a/src/components/icon/core-icon.html
+++ b/src/components/icon/core-icon.html
@@ -1 +1 @@
-<ion-icon [name]="name" [isActive]="isActive" [md]="md" [ios]="ios" [color]="color"></ion-icon>
\ No newline at end of file
+<div></div>
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 0321a6485..4bf697b05 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
+import { Config } from 'ionic-angular';
 
 /**
  * Core Icon is a component that enabled a posibility to add fontawesome icon to the html. It's recommended if both fontawesome
@@ -42,7 +43,7 @@ export class CoreIconComponent implements OnInit, OnDestroy {
     protected element: HTMLElement;
     protected newElement: HTMLElement;
 
-    constructor(el: ElementRef) {
+    constructor(el: ElementRef, private config: Config) {
         this.element = el.nativeElement;
     }
 
@@ -50,9 +51,11 @@ export class CoreIconComponent implements OnInit, OnDestroy {
      * Component being initialized.
      */
     ngOnInit(): void {
+        // Use a new created element to avoid ion-icon working.
+        // This is necessary to make the FontAwesome stuff work.
+        // It is also required to stop Ionic overriding the aria-label attribute.
+        this.newElement = document.createElement('ion-icon');
         if (this.name.startsWith('fa-')) {
-            // Use a new created element to avoid ion-icon working.
-            this.newElement = document.createElement('ion-icon');
             this.newElement.classList.add('icon');
             this.newElement.classList.add('fa');
             this.newElement.classList.add(this.name);
@@ -63,7 +66,10 @@ export class CoreIconComponent implements OnInit, OnDestroy {
                 this.newElement.classList.add('fa-' + this.color);
             }
         } else {
-            this.newElement = <HTMLElement> this.element.firstElementChild;
+            const mode = this.config.get('iconMode');
+            this.newElement.classList.add('icon');
+            this.newElement.classList.add('icon-' + mode);
+            this.newElement.classList.add('ion-' + mode + '-' + this.name);
         }
 
         !this.ariaLabel && this.newElement.setAttribute('aria-hidden', 'true');