Fixed tooltip not being displayed in IE when title is set using Angul…

…ar binding syntax

Fixes #138

src/lib/icon/icon.component.spec.ts

@@ -148,6 +148,36 @@ describe('FaIconComponent', () => {
     expect(spy).not.toHaveBeenCalledWith();
   });
 
+  it('should render a <title> element', () => {
+    @Component({
+      selector: 'fa-host',
+      template: '<fa-icon [icon]="faUser" title="User John Smith"></fa-icon>'
+    })
+    class HostComponent {
+      faUser = faUser;
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, 'svg > title')).toBeTruthy();
+    expect(queryByCss(fixture, 'svg > title').innerHTML).toBe('User John Smith');
+  });
+
+  it('should have title attribute, when title input is set using Angular binding syntax', () => {
+    @Component({
+      selector: 'fa-host',
+      template: `<fa-icon [icon]="faUser" [title]="'User John Smith'"></fa-icon>`
+    })
+    class HostComponent {
+      faUser = faUser;
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, 'svg')).toBeTruthy();
+    expect(queryByCss(fixture, 'fa-icon').getAttribute('title')).toBe('User John Smith');
+  });
+
   describe('custom service configuration', () => {
 
     let fixture: ComponentFixture<HostComponent>;

src/lib/icon/icon.component.ts

@@ -29,10 +29,17 @@ import { FaIconService } from './icon.service';
   template: ``,
   host: {
     class: 'ng-fa-icon',
+    '[attr.title]': 'title',
   }
 })
 export class FaIconComponent implements OnChanges {
   @Input() icon: IconProp;
+
+  /**
+   * Specify a title for the icon.
+   * This text will be displayed in a tooltip on hover and presented to the
+   * screen readers.
+   */
   @Input() title?: string;
   @Input() spin?: boolean;
   @Input() pulse?: boolean;