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/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.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,25 @@ 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 inline. */
+  @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;