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,65 +114,56 @@ 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>
-      <option>colored</option>
+  </select>
-      <option>monochrome</option>
+  <select onchange={{action (mut this.theme) value='target.value'}}>
-    </select>
+    <option>light</option>
-    <select
+    <option>dark</option>
-      onchange={{action (mut this.theme) value="target.value"}}
+  </select>
-    >
+  <input
-      <option>light</option>
+    oninput={{action (mut this.size) value='target.value'}}
-      <option>dark</option>
+    type='range'
-    </select>
+    min='100'
-    <input
+    max='900'
-      oninput={{action (mut this.size) value="target.value"}}
+    step='100'
-      type="range" min="100" max="900" step="100"
+  />
-    />
+  {{this.size}}
-    {{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')))
     (array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
   }}
 >
-{{#each-in this.icons as |prop value|}}
+  {{#each-in this.icons as |prop value|}}
-{{#if (and
+    {{#if
-    (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
+      (and
-    (not (string-includes prop '-24'))
+        (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
-  )
+        (not (string-includes prop '-24'))
-}}
+      )
-{{#let
+    }}
-  (string-replace (string-replace prop '-16' '') '--' '')
+      {{#let (string-replace (string-replace prop '-16' '') '--' '') as |name|}}
-as |name|}}
+        <li>
-  <li>
+          <figure
-    <figure
+            {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
-      {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
+            style={{style-map (array '--icon-name-start' name)}}
-      style={{style-map
+          >
-        (array '--icon-name-start' name)
+            <figcaption>{{name}}</figcaption>
-      }}
+          </figure>
-    >
+        </li>
-      <figcaption>{{name}}</figcaption>
+      {{/let}}
-    </figure>
+    {{/if}}
-  </li>
+  {{/each-in}}
-{{/let}}
-{{/if}}
-{{/each-in}}
 </ul>
 ```
-