@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

package/docs/demos/DataList/examples/DataList.md

@@ -149,19 +149,7 @@ wrapperTag: div
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -173,19 +161,7 @@ wrapperTag: div
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -197,19 +173,7 @@ wrapperTag: div
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -222,19 +186,7 @@ wrapperTag: div
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -1086,19 +1038,7 @@ wrapperTag: div
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1110,19 +1050,7 @@ wrapperTag: div
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1134,19 +1062,7 @@ wrapperTag: div
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1159,19 +1075,7 @@ wrapperTag: div
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -1280,19 +1184,7 @@ wrapperTag: div
                     aria-controls="data-list-actionable-example-toolbar-expandable-content"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-filter" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1484,14 +1376,19 @@ wrapperTag: div
             <div class="pf-v6-c-data-list__item-row">
               <div class="pf-v6-c-data-list__item-control">
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;"
+                    for="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-action-check1"
-                      aria-labelledby="data-list-actionable-example-data-list-item-1"
+                      id="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;-input"
+                      name="data-list-actionable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check1&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-1&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -1559,14 +1456,19 @@ wrapperTag: div
             <div class="pf-v6-c-data-list__item-row">
               <div class="pf-v6-c-data-list__item-control">
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;"
+                    for="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-action-check2"
-                      aria-labelledby="data-list-actionable-example-data-list-item-2"
+                      id="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;-input"
+                      name="data-list-actionable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check2&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-2&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -1658,14 +1560,19 @@ wrapperTag: div
             <div class="pf-v6-c-data-list__item-row">
               <div class="pf-v6-c-data-list__item-control">
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;"
+                    for="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-action-check3"
-                      aria-labelledby="data-list-actionable-example-data-list-item-3"
+                      id="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;-input"
+                      name="data-list-actionable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check3&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-3&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -1696,14 +1603,19 @@ wrapperTag: div
             <div class="pf-v6-c-data-list__item-row">
               <div class="pf-v6-c-data-list__item-control">
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;"
+                    for="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-action-check4"
-                      aria-labelledby="data-list-actionable-example-data-list-item-4"
+                      id="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;-input"
+                      name="data-list-actionable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-action-check4&quot; aria-labelledby&#x3D;&quot;data-list-actionable-example-data-list-item-4&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -2024,19 +1936,7 @@ wrapperTag: div
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2048,19 +1948,7 @@ wrapperTag: div
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2072,19 +1960,7 @@ wrapperTag: div
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2097,19 +1973,7 @@ wrapperTag: div
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -2236,19 +2100,7 @@ wrapperTag: div
                     aria-controls="data-list-expandable-example-toolbar-expandable-content"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-filter" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2300,19 +2152,7 @@ wrapperTag: div
                         id="data-list-expandable-example-toolbar-search-filter-menu"
                       >
                         <span class="pf-v6-c-menu-toggle__icon">
-                          <svg
-                            class="pf-v5-svg"
-                            viewBox="0 0 192 512"
-                            fill="currentColor"
-                            aria-hidden="true"
-                            role="img"
-                            width="1em"
-                            height="1em"
-                          >
-                            <path
-                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                            />
-                          </svg>
+                          <i class="fas fa-filter" aria-hidden="true"></i>
                         </span>
                         <span class="pf-v6-c-menu-toggle__text">Name</span>
                         <span class="pf-v6-c-menu-toggle__controls">
@@ -2506,14 +2346,19 @@ wrapperTag: div
                 </div>
 
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;"
+                    for="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-expandable-check1"
-                      aria-labelledby="data-list-expandable-example-data-list-item-1"
+                      id="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;-input"
+                      name="data-list-expandable-example-data-list-item-1&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check1&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-1&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -2592,63 +2437,82 @@ wrapperTag: div
                         class="pf-v6-c-table__td pf-v6-c-table__check"
                         role="cell"
                       >
-                        <div class="pf-v6-c-check pf-m-standalone">
+                        <label
+                          class="pf-v6-c-check pf-m-standalone"
+                          id="compact-table-demo-data-listcheckrowcheck"
+                          for="compact-table-demo-data-listcheckrowcheck-input"
+                        >
                           <input
                             class="pf-v6-c-check__input"
                             type="checkbox"
-                            name="check-all"
-                            aria-label="Select all rows"
+                            id="compact-table-demo-data-listcheckrowcheck-input"
+                            name="compact-table-demo-data-listcheckrowcheck-input"
+                            aria-label="Standalone check"
                           />
-                        </div>
+                        </label>
                       </td>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
                         scope="col"
                       >Contributor</th>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
                         scope="col"
                       >Position</th>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
                         scope="col"
                       >Location</th>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
                         scope="col"
                       >Last seen</th>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
                         scope="col"
                       >Numbers</th>
+
                       <th
                         class="pf-v6-c-table__th pf-v6-c-table__icon"
                         role="columnheader"
                         scope="col"
                       >Icons</th>
+
                       <td class="pf-v6-c-table__td"></td>
+
                       <td class="pf-v6-c-table__td"></td>
                     </tr>
                   </thead>
+
                   <tbody class="pf-v6-c-table__tbody" role="rowgroup">
                     <tr class="pf-v6-c-table__tr" role="row">
                       <td
                         class="pf-v6-c-table__td pf-v6-c-table__check"
                         role="cell"
                       >
-                        <div class="pf-v6-c-check pf-m-standalone">
+                        <label
+                          class="pf-v6-c-check pf-m-standalone"
+                          id="compact-table-demo-data-listcheckrow1check"
+                          for="compact-table-demo-data-listcheckrow1check-input"
+                        >
                           <input
                             class="pf-v6-c-check__input"
                             type="checkbox"
-                            name="checkrow1"
-                            aria-labelledby="compact-table-demo-data-list-name1"
+                            id="compact-table-demo-data-listcheckrow1check-input"
+                            name="compact-table-demo-data-listcheckrow1check-input"
+                            aria-label="Standalone check"
                           />
-                        </div>
+                        </label>
                       </td>
                       <td
                         class="pf-v6-c-table__td"
@@ -2691,67 +2555,21 @@ wrapperTag: div
                       >
                         <a href="#">Action link</a>
                       </td>
+
                       <td
                         class="pf-v6-c-table__td pf-v6-c-table__action"
                         role="cell"
                       >
-                        <div class="pf-v6-c-dropdown">
-                          <button
-                            class="pf-v6-c-dropdown__toggle pf-m-plain"
-                            id="-dropdown-kebab-1-button"
-                            aria-expanded="false"
-                            type="button"
-                            aria-label="Actions"
-                          >
+                        <button
+                          class="pf-v6-c-menu-toggle pf-m-plain"
+                          type="button"
+                          aria-expanded="false"
+                          aria-label="Table actions"
+                        >
+                          <span class="pf-v6-c-menu-toggle__icon">
                             <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-                          </button>
-                          <ul
-                            class="pf-v6-c-dropdown__menu pf-m-align-right"
-                            aria-labelledby="-dropdown-kebab-1-button"
-                            hidden
-                            role="menu"
-                          >
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                              >Action</button>
-                            </li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item pf-m-disabled"
-                                role="menuitem"
-                                href="#"
-                                aria-disabled="true"
-                                tabindex="-1"
-                              >Disabled link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                                disabled
-                              >Disabled action</button>
-                            </li>
-                            <li class="pf-v6-c-divider" role="separator"></li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Separated link</a>
-                            </li>
-                          </ul>
-                        </div>
+                          </span>
+                        </button>
                       </td>
                     </tr>
                     <tr class="pf-v6-c-table__tr" role="row">
@@ -2759,15 +2577,21 @@ wrapperTag: div
                         class="pf-v6-c-table__td pf-v6-c-table__check"
                         role="cell"
                       >
-                        <div class="pf-v6-c-check pf-m-standalone">
+                        <label
+                          class="pf-v6-c-check pf-m-standalone"
+                          id="compact-table-demo-data-listcheckrow2check"
+                          for="compact-table-demo-data-listcheckrow2check-input"
+                        >
                           <input
                             class="pf-v6-c-check__input"
                             type="checkbox"
-                            name="checkrow2"
-                            aria-labelledby="compact-table-demo-data-list-name2"
+                            id="compact-table-demo-data-listcheckrow2check-input"
+                            name="compact-table-demo-data-listcheckrow2check-input"
+                            aria-label="Standalone check"
                           />
-                        </div>
+                        </label>
                       </td>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
@@ -2775,6 +2599,7 @@ wrapperTag: div
                       >
                         <span id="compact-table-demo-data-list-name2">Amy Miller</span>
                       </th>
+
                       <td
                         class="pf-v6-c-table__td"
                         role="cell"
@@ -2809,67 +2634,21 @@ wrapperTag: div
                       >
                         <a href="#">Action link</a>
                       </td>
+
                       <td
                         class="pf-v6-c-table__td pf-v6-c-table__action"
                         role="cell"
                       >
-                        <div class="pf-v6-c-dropdown">
-                          <button
-                            class="pf-v6-c-dropdown__toggle pf-m-plain"
-                            id="-dropdown-kebab-2-button"
-                            aria-expanded="false"
-                            type="button"
-                            aria-label="Actions"
-                          >
+                        <button
+                          class="pf-v6-c-menu-toggle pf-m-plain"
+                          type="button"
+                          aria-expanded="false"
+                          aria-label="Table actions"
+                        >
+                          <span class="pf-v6-c-menu-toggle__icon">
                             <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-                          </button>
-                          <ul
-                            class="pf-v6-c-dropdown__menu pf-m-align-right"
-                            aria-labelledby="-dropdown-kebab-2-button"
-                            hidden
-                            role="menu"
-                          >
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                              >Action</button>
-                            </li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item pf-m-disabled"
-                                role="menuitem"
-                                href="#"
-                                aria-disabled="true"
-                                tabindex="-1"
-                              >Disabled link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                                disabled
-                              >Disabled action</button>
-                            </li>
-                            <li class="pf-v6-c-divider" role="separator"></li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Separated link</a>
-                            </li>
-                          </ul>
-                        </div>
+                          </span>
+                        </button>
                       </td>
                     </tr>
                     <tr class="pf-v6-c-table__tr" role="row">
@@ -2877,15 +2656,21 @@ wrapperTag: div
                         class="pf-v6-c-table__td pf-v6-c-table__check"
                         role="cell"
                       >
-                        <div class="pf-v6-c-check pf-m-standalone">
+                        <label
+                          class="pf-v6-c-check pf-m-standalone"
+                          id="compact-table-demo-data-listcheckrow3check"
+                          for="compact-table-demo-data-listcheckrow3check-input"
+                        >
                           <input
                             class="pf-v6-c-check__input"
                             type="checkbox"
-                            name="checkrow3"
-                            aria-labelledby="compact-table-demo-data-list-name3"
+                            id="compact-table-demo-data-listcheckrow3check-input"
+                            name="compact-table-demo-data-listcheckrow3check-input"
+                            aria-label="Standalone check"
                           />
-                        </div>
+                        </label>
                       </td>
+
                       <th
                         class="pf-v6-c-table__th"
                         role="columnheader"
@@ -2895,6 +2680,7 @@ wrapperTag: div
                           id="compact-table-demo-data-list-name3"
                         >Steve Wilson</span>
                       </th>
+
                       <td
                         class="pf-v6-c-table__td"
                         role="cell"
@@ -2929,67 +2715,21 @@ wrapperTag: div
                       >
                         <a href="#">Action link</a>
                       </td>
+
                       <td
                         class="pf-v6-c-table__td pf-v6-c-table__action"
                         role="cell"
                       >
-                        <div class="pf-v6-c-dropdown">
-                          <button
-                            class="pf-v6-c-dropdown__toggle pf-m-plain"
-                            id="-dropdown-kebab-3-button"
-                            aria-expanded="false"
-                            type="button"
-                            aria-label="Actions"
-                          >
+                        <button
+                          class="pf-v6-c-menu-toggle pf-m-plain"
+                          type="button"
+                          aria-expanded="false"
+                          aria-label="Table actions"
+                        >
+                          <span class="pf-v6-c-menu-toggle__icon">
                             <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-                          </button>
-                          <ul
-                            class="pf-v6-c-dropdown__menu pf-m-align-right"
-                            aria-labelledby="-dropdown-kebab-3-button"
-                            hidden
-                            role="menu"
-                          >
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                              >Action</button>
-                            </li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item pf-m-disabled"
-                                role="menuitem"
-                                href="#"
-                                aria-disabled="true"
-                                tabindex="-1"
-                              >Disabled link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                                disabled
-                              >Disabled action</button>
-                            </li>
-                            <li class="pf-v6-c-divider" role="separator"></li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Separated link</a>
-                            </li>
-                          </ul>
-                        </div>
+                          </span>
+                        </button>
                       </td>
                     </tr>
                     <tr class="pf-v6-c-table__tr" role="row">
@@ -2997,14 +2737,19 @@ wrapperTag: div
                         class="pf-v6-c-table__td pf-v6-c-table__check"
                         role="cell"
                       >
-                        <div class="pf-v6-c-check pf-m-standalone">
+                        <label
+                          class="pf-v6-c-check pf-m-standalone"
+                          id="compact-table-demo-data-listcheckrow4check"
+                          for="compact-table-demo-data-listcheckrow4check-input"
+                        >
                           <input
                             class="pf-v6-c-check__input"
                             type="checkbox"
-                            name="checkrow4"
-                            aria-labelledby="compact-table-demo-data-list-name4"
+                            id="compact-table-demo-data-listcheckrow4check-input"
+                            name="compact-table-demo-data-listcheckrow4check-input"
+                            aria-label="Standalone check"
                           />
-                        </div>
+                        </label>
                       </td>
                       <td
                         class="pf-v6-c-table__td"
@@ -3049,67 +2794,21 @@ wrapperTag: div
                       >
                         <a href="#">Action link</a>
                       </td>
+
                       <td
                         class="pf-v6-c-table__td pf-v6-c-table__action"
                         role="cell"
                       >
-                        <div class="pf-v6-c-dropdown">
-                          <button
-                            class="pf-v6-c-dropdown__toggle pf-m-plain"
-                            id="-dropdown-kebab-4-button"
-                            aria-expanded="false"
-                            type="button"
-                            aria-label="Actions"
-                          >
+                        <button
+                          class="pf-v6-c-menu-toggle pf-m-plain"
+                          type="button"
+                          aria-expanded="false"
+                          aria-label="Table actions"
+                        >
+                          <span class="pf-v6-c-menu-toggle__icon">
                             <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-                          </button>
-                          <ul
-                            class="pf-v6-c-dropdown__menu pf-m-align-right"
-                            aria-labelledby="-dropdown-kebab-4-button"
-                            hidden
-                            role="menu"
-                          >
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                              >Action</button>
-                            </li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item pf-m-disabled"
-                                role="menuitem"
-                                href="#"
-                                aria-disabled="true"
-                                tabindex="-1"
-                              >Disabled link</a>
-                            </li>
-                            <li role="none">
-                              <button
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                type="button"
-                                disabled
-                              >Disabled action</button>
-                            </li>
-                            <li class="pf-v6-c-divider" role="separator"></li>
-                            <li role="none">
-                              <a
-                                class="pf-v6-c-dropdown__menu-item"
-                                role="menuitem"
-                                href="#"
-                              >Separated link</a>
-                            </li>
-                          </ul>
-                        </div>
+                          </span>
+                        </button>
                       </td>
                     </tr>
                   </tbody>
@@ -3141,14 +2840,19 @@ wrapperTag: div
                 </div>
 
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;"
+                    for="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-expandable-check2"
-                      aria-labelledby="data-list-expandable-example-data-list-item-2"
+                      id="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;-input"
+                      name="data-list-expandable-example-data-list-item-2&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check2&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-2&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -3266,14 +2970,19 @@ wrapperTag: div
                 </div>
 
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;"
+                    for="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-expandable-check3"
-                      aria-labelledby="data-list-expandable-example-data-list-item-3"
+                      id="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;-input"
+                      name="data-list-expandable-example-data-list-item-3&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check3&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-3&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -3319,14 +3028,19 @@ wrapperTag: div
                 </div>
 
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;"
+                    for="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-expandable-check4"
-                      aria-labelledby="data-list-expandable-example-data-list-item-4"
+                      id="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;-input"
+                      name="data-list-expandable-example-data-list-item-4&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check4&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-4&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -3420,14 +3134,19 @@ wrapperTag: div
                 </div>
 
                 <div class="pf-v6-c-data-list__check">
-                  <div class="pf-v6-c-check pf-m-standalone">
+                  <label
+                    class="pf-v6-c-check pf-m-standalone"
+                    id="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;"
+                    for="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;-input"
+                  >
                     <input
                       class="pf-v6-c-check__input"
                       type="checkbox"
-                      name="check-expandable-check5"
-                      aria-labelledby="data-list-expandable-example-data-list-item-5"
+                      id="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;-input"
+                      name="data-list-expandable-example-data-list-item-5&quot;type&#x3D;&quot;checkbox&quot; name&#x3D;&quot;check-expandable-check5&quot; aria-labelledby&#x3D;&quot;data-list-expandable-example-data-list-item-5&quot;-input"
+                      aria-label="Standalone check"
                     />
-                  </div>
+                  </label>
                 </div>
               </div>
               <div class="pf-v6-c-data-list__item-content">
@@ -3783,19 +3502,7 @@ wrapperTag: div
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -3807,19 +3514,7 @@ wrapperTag: div
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -3831,19 +3526,7 @@ wrapperTag: div
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -3856,19 +3539,7 @@ wrapperTag: div
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -3980,19 +3651,7 @@ wrapperTag: div
                     aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-filter" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -4011,19 +3670,7 @@ wrapperTag: div
                         id="data-list-static-bottom-example-toolbar-search-filter-menu"
                       >
                         <span class="pf-v6-c-menu-toggle__icon">
-                          <svg
-                            class="pf-v5-svg"
-                            viewBox="0 0 192 512"
-                            fill="currentColor"
-                            aria-hidden="true"
-                            role="img"
-                            width="1em"
-                            height="1em"
-                          >
-                            <path
-                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                            />
-                          </svg>
+                          <i class="fas fa-filter" aria-hidden="true"></i>
                         </span>
                         <span class="pf-v6-c-menu-toggle__text">Name</span>
                         <span class="pf-v6-c-menu-toggle__controls">