MOBILE-2940 core-icon: label does not work on Ionic icons

main
sam marshall 2019-03-27 14:27:58 +00:00
parent c0697e4436
commit 2b7d59b1a3
2 changed files with 11 additions and 5 deletions

View File

@ -1 +1 @@
<ion-icon [name]="name" [isActive]="isActive" [md]="md" [ios]="ios" [color]="color"></ion-icon>
<div></div>

View File

@ -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');