feat(icon): add input for inline styling of icons

Author: josephperrott

src/demo-app/icon/icon-demo.html

@@ -32,4 +32,8 @@
     Custom icon font and CSS:
     <mat-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></mat-icon>
   </p>
+
+  <p>
+    Inline styling <mat-icon inline="true">favorite</mat-icon> icons appear as
+    the same <mat-icon inline="true">directions_car</mat-icon>size as text around them.</p>
 </div>

src/demo-app/tabs/tabs-demo.scss

@@ -16,6 +16,10 @@
   }
 }
 
+.mat-tab-label.mat-tab-label.mat-tab-label {
+  min-width: 0;
+}
+
 .demo-tab-group {
   flex-grow: 1;
 }

src/lib/icon/icon.scss

@@ -10,6 +10,13 @@ $mat-icon-size: 24px !default;
   fill: currentColor;
   height: $mat-icon-size;
   width: $mat-icon-size;
+
+  &.mat-icon-inline {
+    font-size: inherit;
+    height: inherit;
+    line-height: inherit;
+    width: inherit;
+  }
 }
 
 .mat-form-field:not(.mat-form-field-appearance-legacy) {

src/lib/icon/icon.spec.ts

@@ -50,6 +50,7 @@ describe('MatIcon', () => {
         IconFromSvgName,
         IconWithAriaHiddenFalse,
         IconWithBindingAndNgIf,
+        InlineIcon,
       ]
     });
 
@@ -82,14 +83,26 @@ describe('MatIcon', () => {
     const fixture = TestBed.createComponent(IconWithLigature);
     const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
     expect(iconElement.getAttribute('aria-hidden'))
-        .toBe('true', 'Expected the mat-icon element has aria-hidden="true" by default');
+      .toBe('true', 'Expected the mat-icon element has aria-hidden="true" by default');
   });
 
   it('should not override a user-provided aria-hidden attribute', () => {
     const fixture = TestBed.createComponent(IconWithAriaHiddenFalse);
     const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
     expect(iconElement.getAttribute('aria-hidden'))
-        .toBe('false', 'Expected the mat-icon element has the user-provided aria-hidden value');
+      .toBe('false', 'Expected the mat-icon element has the user-provided aria-hidden value');
+  });
+
+  it('should apply inline styling', () => {
+    const fixture = TestBed.createComponent(InlineIcon);
+    const iconElement = fixture.debugElement.nativeElement.querySelector('mat-icon');
+    expect(iconElement.classList.contains('mat-icon-inline'))
+      .toBeFalsy('Expected the mat-icon element to not include the inline styling class');
+
+    fixture.debugElement.componentInstance.inline = true;
+    fixture.detectChanges();
+    expect(iconElement.classList.contains('mat-icon-inline'))
+      .toBeTruthy('Expected the mat-icon element to include the inline styling class');
   });
 
   describe('Ligature icons', () => {
@@ -500,10 +513,15 @@ class IconFromSvgName {
 }
 
 @Component({template: '<mat-icon aria-hidden="false">face</mat-icon>'})
-class IconWithAriaHiddenFalse { }
+class IconWithAriaHiddenFalse {}
 
 @Component({template: `<mat-icon [svgIcon]="iconName" *ngIf="showIcon">{{iconName}}</mat-icon>`})
 class IconWithBindingAndNgIf {
   iconName = 'fluffy';
   showIcon = true;
 }
+
+@Component({template: `<mat-icon [inline]="inline">{{iconName}}</mat-icon>`})
+class InlineIcon {
+  inline = false;
+}

src/lib/icon/icon.ts

@@ -19,6 +19,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {CanColor, mixinColor} from '@angular/material/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatIconRegistry} from './icon-registry';
 
 
@@ -67,13 +68,27 @@ export const _MatIconMixinBase = mixinColor(MatIconBase);
   host: {
     'role': 'img',
     'class': 'mat-icon',
+    '[class.mat-icon-inline]': 'inline',
   },
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, CanColor {
 
+  /**
+   * Whether the icon should be inlined, automatically sizing the icon to match the font size of
+   * the element the icon is contained in.
+   */
+  @Input()
+  get inline(): boolean {
+    return this._inline;
+  }
+  set inline(inline: boolean) {
+    this._inline = coerceBooleanProperty(inline);
+  }
+  private _inline: boolean = false;
+
   /** Name of the icon in the SVG icon set. */
   @Input() svgIcon: string;