[ADF-2627] Icons-only mode for Info Drawer (#3398)

* tab with icon

* docs

* test

lib/core/info-drawer/info-drawer.component.html

@@ -10,6 +10,12 @@
         <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
             <ng-container *ngFor="let contentBlock of contentBlocks">
                 <mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
+                    <ng-container *ngIf="contentBlock.icon">
+                        <ng-template mat-tab-label>
+                            <mat-icon>{{ contentBlock.icon }}</mat-icon>
+                        </ng-template>
+                    </ng-container>
+
                     <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
                 </mat-tab>
             </ng-container>

lib/core/info-drawer/info-drawer.component.spec.ts

@@ -75,6 +75,8 @@ describe('InfoDrawerComponent', () => {
         </adf-info-drawer-tab>
         <adf-info-drawer-tab label="Tab2">
         </adf-info-drawer-tab>
+        <adf-info-drawer-tab label="Tab3" icon="tab-icon">
+        </adf-info-drawer-tab>
     </adf-info-drawer>
        `
 })
@@ -123,4 +125,12 @@ describe('Custom InfoDrawer', () => {
         expect(tab.length).toBe(1);
         expect(tab[0].nativeElement.innerText).toBe('Tab2');
     });
+
+    it('should render a tab with icon', () => {
+        component.tabIndex = 2;
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+        expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
+        expect(tab[0].nativeElement.innerText).toContain('tab-icon');
+    });
 });

lib/core/info-drawer/info-drawer.component.ts

@@ -22,9 +22,14 @@ import { MatTabChangeEvent } from '@angular/material';
     template: '<ng-template><ng-content></ng-content></ng-template>'
 })
 export class InfoDrawerTabComponent {
+    /** The title of the tab. */
     @Input()
     label: string = 'Main tab';
 
+    /** Icon to render for the tab. */
+    @Input()
+    icon: string = null;
+
     @ViewChild(TemplateRef)
     content: TemplateRef<any>;
 }