EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/icon/core-icon.html
View File

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

12
src/components/icon/icon.ts
View File

@ -13,6 +13,7 @@
// limitations under the License. // limitations under the License.
import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core'; 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 * 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 element: HTMLElement;
protected newElement: HTMLElement; protected newElement: HTMLElement;
constructor(el: ElementRef) { constructor(el: ElementRef, private config: Config) {
this.element = el.nativeElement; this.element = el.nativeElement;
} }
@ -50,9 +51,11 @@ export class CoreIconComponent implements OnInit, OnDestroy {
* Component being initialized. * Component being initialized.
*/ */
ngOnInit(): void { ngOnInit(): void {
if (this.name.startsWith('fa-')) {
// Use a new created element to avoid ion-icon working. // 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'); this.newElement = document.createElement('ion-icon');
if (this.name.startsWith('fa-')) {
this.newElement.classList.add('icon'); this.newElement.classList.add('icon');
this.newElement.classList.add('fa'); this.newElement.classList.add('fa');
this.newElement.classList.add(this.name); this.newElement.classList.add(this.name);
@ -63,7 +66,10 @@ export class CoreIconComponent implements OnInit, OnDestroy {
this.newElement.classList.add('fa-' + this.color); this.newElement.classList.add('fa-' + this.color);
} }
} else { } 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'); !this.ariaLabel && this.newElement.setAttribute('aria-hidden', 'true');