Update iconography documentation

ui/packages/consul-ui/app/styles/base/icons/README.mdx

@@ -1,5 +1,12 @@
 # Iconography
 
+_We recently started adopting the [@hashicorp/ember-flight-icons](https://flight-hashicorp.vercel.app/) package, in particular the
+usage of the `<FlightIcon>` component to render icons. This enables us to use all the
+icons listed [on the flight icons page](https://flight-hashicorp.vercel.app/). If an icon is not present in the flight-icons package,
+you may resort to the techniques listed below._
+
+---
+
 All our iconography uses native CSS properties for adding iconography from The
 Outside. You can also add icons using the same properties within `style=""`
 attributes, but you should think twice before adding decorative content into
@@ -29,14 +36,14 @@ selectors.
 
 ```css
 .selector::before {
-  --icon-name: icon-aws-color;
+  --icon-name: icon-alert-circle;
   content: '';
 }
 ```
 
 ```css
 .selector::after {
-  --icon-name: icon-aws;
+  --icon-name: icon-alert-circle;
   --icon-color: rgb(var(---white));
   content: '';
 }
@@ -48,7 +55,7 @@ icons in HTML using these CSS properties.
 ```hbs preview-template
 <h2
   style={{style-map
-    (array '--icon-name-start' 'icon-consul')
+    (array '--icon-name-start' 'icon-alert-circle')
     (array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
     (array '--icon-name-end' 'icon-vault')
     (array '--icon-color-end' 'var(--color-vault-500)')
@@ -64,9 +71,7 @@ following. Under different circumstances this would give us an option that works
 
 ```hbs
 <span
-  class={{class-map
+  class={{class-map 'visually-hidden'}}
-    'visually-hidden'
-  }}
   style={{style-map
     (array '--icon-name-start' @name)
     (array '--icon-color' @color)
@@ -75,11 +80,9 @@ following. Under different circumstances this would give us an option that works
   ...attributes
 >{{yield}}</span>
 
-
+<Icon @name='icon-name' @color='#FF0000' @size='icon-300' />
-<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
 ```
 
-
 ## Deprecated
 
 Please prefer our Constructable `%placeholder` styles over singular CSS
@@ -111,37 +114,32 @@ use `-mask`, use `-icon` instead:
 
 ```css
 .selector::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
+  @extend %with-alert-circle-icon, %as-pseudo;
 }
 ```
 
 ```hbs preview-template
 <figure>
-    <select
+  <select onchange={{action (mut this.type) value='target.value'}}>
-      onchange={{action (mut this.type) value="target.value"}}
-    >
     <option>colored</option>
     <option>monochrome</option>
   </select>
-    <select
+  <select onchange={{action (mut this.theme) value='target.value'}}>
-      onchange={{action (mut this.theme) value="target.value"}}
-    >
     <option>light</option>
     <option>dark</option>
   </select>
   <input
-      oninput={{action (mut this.size) value="target.value"}}
+    oninput={{action (mut this.size) value='target.value'}}
-      type="range" min="100" max="900" step="100"
+    type='range'
+    min='100'
+    max='900'
+    step='100'
   />
   {{this.size}}
 </figure>
 <ul
-  {{css-props (set this 'icons')
+  {{css-props (set this 'icons') prefix='icon-'}}
-    prefix='icon-'
+  class={{class-map (concat 'theme-' (or this.theme 'light'))}}
-  }}
-  class={{class-map
-    (concat 'theme-' (or this.theme 'light'))
-  }}
   style={{style-map
     (array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
     (array '--icon-size' (concat 'icon-' (or this.size '500')))
@@ -149,20 +147,17 @@ use `-mask`, use `-icon` instead:
   }}
 >
   {{#each-in this.icons as |prop value|}}
-{{#if (and
+    {{#if
+      (and
         (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
         (not (string-includes prop '-24'))
       )
     }}
-{{#let
+      {{#let (string-replace (string-replace prop '-16' '') '--' '') as |name|}}
-  (string-replace (string-replace prop '-16' '') '--' '')
-as |name|}}
         <li>
           <figure
             {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
-      style={{style-map
+            style={{style-map (array '--icon-name-start' name)}}
-        (array '--icon-name-start' name)
-      }}
           >
             <figcaption>{{name}}</figcaption>
           </figure>
@@ -172,4 +167,3 @@ as |name|}}
   {{/each-in}}
 </ul>
 ```
-