docs(icon): Add docs for inline icon.

Author: josephperrott

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

@@ -39,7 +39,11 @@
     <mat-icon fontSet="fontawesome" fontIcon="fa-birthday-cake"></mat-icon>
   </p>
 
+  <span>Inline styling allows icons to appear as the same size as text around them.</span>
   <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>
+    My <span class="cdk-visually-hidden">dog</span><mat-icon inline="true">pets</mat-icon> is my
+    <span class="cdk-visually-hidden">favorite</span><mat-icon inline="true">favorite</mat-icon>,
+    he loves to go on <span class="cdk-visually-hidden">walks</span>
+    <mat-icon inline="true">directions_walk</mat-icon>
+  </p>
 </div>

src/lib/icon/icon.md

@@ -90,7 +90,8 @@ In thinking about accessibility, it is useful to place icon use into one of thre
 1. **Decorative**: the icon conveys no real semantic meaning and is purely cosmetic.
 2. **Interactive**: a user will click or otherwise interact with the icon to perform some action.
 3. **Indicator**: the icon is not interactive, but it conveys some information, such as a status.
-
+4. **Inline**: the icon is not interactive and is inlined into a block of text to convey 
+information.
 ### Bidirectionality
 
 By default icons in an RTL layout will look exactly the same as in LTR, however certain icons have
@@ -103,21 +104,20 @@ you want to mirror an icon only in an RTL layout, you can use the `mat-icon-rtl-
 
 #### Decorative icons
 When the icon is puely cosmetic and conveys no real semantic meaning, the `<mat-icon>` element
-should be marked with `aria-hidden="true"`.
+is marked with `aria-hidden="true"`.
 
 #### Interactive icons
 Icons alone are not interactive elements for screen-reader users; when the user would interact with
 some icon on the page, a more appropriate  element should "own" the interaction:
 * The `<mat-icon>` element should be a child of a `<button>` or `<a>` element.
-* The `<mat-icon>` element should be marked with `aria-hidden="true"`.
 * The parent `<button>` or `<a>` should either have a meaningful label provided either through
 direct text content, `aria-label`, or `aria-labelledby`.
 
-#### Indicator icons
-When the presence of an icon communicates some information to the user, that information must also
-be made available to screen-readers. The most straightforward way to do this is to
-1. Mark the `<mat-icon>` as `aria-hidden="true"`
-2. Add a `<span>` as an adjacent sibling to the `<mat-icon>` element with text that conveys the same
+#### Indicator icons/Inline icons
+When the presence of an icon communicates some information to the user whether as an indicator or 
+by being inlined into a block of text, that information must also be made available to 
+screen-readers. The most straightforward way to do this is to
+1. Add a `<span>` as an adjacent sibling to the `<mat-icon>` element with text that conveys the same
 information as the icon.
-3. Add the `cdk-visually-hidden` class to the `<span>`. This will make the message invisible
+2. Add the `cdk-visually-hidden` class to the `<span>`. This will make the message invisible
 on-screen but still available to screen-reader users.