docs(icon): switch away from self-closing

Custom directives should not be self-closing or void elements. Docs and samples updated to reflect this. See this for more info: angular/angular.js#1953 (comment)
andrewconnell · Feb 7, 2016 · b5b8171 · b5b8171
1 parent 8208cd1
commit b5b8171
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/src/components/icon/demo/index.html b/src/components/icon/demo/index.html
@@ -27,20 +27,20 @@ <h1 class="ms-font-su">Icon Demo | &lt;uif-icon&gt;</h1>
   <p>
     This markup: <br />
     <code>
-      &lt;uif-icon uif-type="arrowDownLeft" /&gt;
+      &lt;uif-icon uif-type="arrowDownLeft"&gt;&lt;/uif-icon&gt;
     </code>
   </p>
 
   <p>
     Renders this:
     <br />
-    <uif-icon uif-type="arrowDownLeft" />
+    <uif-icon uif-type="arrowDownLeft"></uif-icon>
   </p>
 
   <h2>Modifiers</h2>
   <p>
     Change the size &amp; color using standard CSS sizing techniques: <code>style="font-size:32px; color:red;"</code>:<br />
-    <uif-icon uif-type="arrowDownLeft" style="font-size:32px; color:red;" />
+    <uif-icon uif-type="arrowDownLeft" style="font-size:32px; color:red;"></uif-icon>
   </p>
 
   <h2>Changing the Icon</h2>
@@ -51,7 +51,7 @@ <h2>Changing the Icon</h2>
 
     <div>
       Selected icon = <code>{{selectedIcon}}</code><br />
-      Rendered icon = <uif-icon uif-type="{{selectedIcon.id}}" />
+      Rendered icon = <uif-icon uif-type="{{selectedIcon.id}}"></uif-icon>
     </div>
   </div>
 
@@ -60,10 +60,10 @@ <h2>Errors When Unsupported Icons Specified</h2>
     Wouldn't you like to see an error when you specify an icon that's not supported? Open the JavaScript console to see an error for an icon like this: <br />
 
     <code>
-      &lt;uif-icon uif-type="ngOfficeUiFabric" /&gt;
+      &lt;uif-icon uif-type="ngOfficeUiFabric"&gt;&lt;/uif-icon&gt;
     </code>
 
-    <uif-icon uif-type="ngOfficeUiFabric" />
+    <uif-icon uif-type="ngOfficeUiFabric"></uif-icon>
   </p>
 
 </body>

diff --git a/src/components/icon/demoBasicUsage/index.html b/src/components/icon/demoBasicUsage/index.html
@@ -1 +1 @@
-<uif-icon uif-type="arrowDownLeft" />
+<uif-icon uif-type="arrowDownLeft"></uif-icon>
diff --git a/src/components/icon/demoTypeScriptUsage/index.html b/src/components/icon/demoTypeScriptUsage/index.html
@@ -45,7 +45,7 @@ <h2>Changing the Icon</h2>
 
     <div>
       Selected icon = <code>{{controller.selectedIcon}}</code><br />
-      Rendered icon = <uif-icon uif-type="{{controller.selectedIcon}}" />
+      Rendered icon = <uif-icon uif-type="{{controller.selectedIcon}}"></uif-icon>
     </div>
   </div>
 

diff --git a/src/components/icon/iconDirective.ts b/src/components/icon/iconDirective.ts
@@ -9,7 +9,7 @@ import {IconEnum} from './iconEnum';
  * @module officeuifabric.components.contextualmenu
  * 
  * @description
- * This is the scope used by the `<uif-icon />` directive.
+ * This is the scope used by the `<uif-icon>` directive.
  * 
  * @property {string} uifType - Icon to display. Possible types are defined in {@link IconEnum}.
  */
@@ -44,7 +44,7 @@ class IconController {
  * 
  * @usage
  * 
- * <uif-icon uif-type="arrowDownLeft" />
+ * <uif-icon uif-type="arrowDownLeft"></uif-icon>
  */
 export class IconDirective implements ng.IDirective {