docs(icon): use ng-bind for md-icon ligature documentation (#9777)

For md-icon font ligatures, `ng-bind` should be used, to keep logic modular inside the md-icon declaration. This is also an important change for users that use multilingual support in their applications and use our demo code as a template

* Update icon demo to use ng-bind instead of inline text interpolization
* Update icon documentation to explain ng-bind usage and its importance with localization support

`ng-bind` is more also more efficient than text interpolization.

Fixes #9750

Author: clshortfuse

src/components/icon/demoFontIconsWithLigatures/index.html

@@ -12,8 +12,8 @@
         <md-icon ng-style="{color: font.color}"
             aria-label="{{ font.name }}"
             class="material-icons step"
-            ng-class="it.size">
-          {{ font.name }}
+            ng-class="it.size"
+            ng-bind="font.name">
         </md-icon>
       </div>
     </div>

src/components/icon/js/iconDirective.js

@@ -48,13 +48,18 @@ angular
  *    rel="stylesheet">`
  * </li>
  * <li>
- *   Use either (a) font-icon class names or (b) font ligatures to render the font glyph by using
- *   its textual name
+ *   Use either (a) font-icon class names or (b) a fontset and a font ligature to render the font glyph by
+ *   using its textual name _or_ numerical character reference. Note that `material-icons` is the default fontset when
+ *   none is specified.
  * </li>
- * <li>
- *   Use `<md-icon md-font-icon="classname" />` or <br/>
- *   use `<md-icon md-font-set="font library classname or alias"> textual_name </md-icon>` or <br/>
- *   use `<md-icon md-font-set="font library classname or alias"> numerical_character_reference </md-icon>`
+ * <li> Use any of the following templates: <br/>
+ *   <ul>
+ *     <li>`<md-icon md-font-icon="classname"></md-icon>`</li>
+ *     <li>`<md-icon md-font-set="font library classname or alias">textual_name</md-icon>`</li>
+ *     <li>`<md-icon> numerical_character_reference </md-icon>`</li>
+ *     <li>`<md-icon ng_bind="'textual_name'"></md-icon>`</li>
+ *     <li>`<md-icon ng-bind="scopeVariable"></md-icon>`</li>
+ *   </ul>
  * </li>
  * </ol>
  *
@@ -73,6 +78,19 @@ angular
  * <li>https://design.google.com/icons/#ic_accessibility</li>
  * </ul>
  *
+ * ### Localization
+ *
+ * Because an `md-icon` element's text content is not intended to translated, it is recommended to declare the text
+ * content for an `md-icon` element in its start tag. Instead of using the HTML text content, consider using `ng-bind`
+ * with a scope variable or literal string.
+ *
+ * Examples:
+ *
+ * <ul>
+ *   <li>`<md-icon ng-bind="myIconVariable"></md-icon>`</li>
+ *   <li>`<md-icon ng-bind="'menu'"></md-icon>`
+ * </ul>
+ *
  * <h2 id="material_design_icons">Material Design Icons</h2>
  * Using the Material Design Icon-Selector, developers can easily and quickly search for a Material Design font-icon and
  * determine its textual name and character reference code. Click on any icon to see the slide-up information