@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/docs/components/Table/examples/Table.md

@@ -133,10 +133,11 @@ cssPrefix: pf-v6-c-table
 ### Responsive layout modifier usage
 
 These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
+**Note:** If a wrapping element creates an `inline-size` or `size` container with the container name `pf-v6-contain-table`, the breakpoints will apply to the container's width.
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.pf-m-grid` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
 
 ## Sortable
@@ -1331,7 +1332,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -1441,7 +1454,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -1537,7 +1562,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -1619,7 +1656,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -1704,7 +1753,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -1802,7 +1863,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -1912,7 +1985,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2007,7 +2092,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2088,7 +2185,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2172,7 +2281,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2270,7 +2391,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2378,7 +2511,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2471,7 +2616,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2565,7 +2722,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2646,7 +2815,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2746,7 +2927,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -2856,7 +3049,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -3093,7 +3298,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -3175,7 +3392,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -3260,7 +3489,19 @@ Note: Table column widths will respond automatically when toggling expanded rows
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -8659,7 +8900,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -8735,7 +8988,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -8842,7 +9107,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -8935,7 +9212,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9031,7 +9320,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9126,7 +9427,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9219,7 +9532,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9328,7 +9653,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9421,7 +9758,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9518,7 +9867,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -9918,7 +10279,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -10015,7 +10388,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -10116,7 +10501,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -10213,7 +10610,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -10364,7 +10773,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -10441,7 +10862,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -10753,7 +11186,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -10887,7 +11332,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -11080,7 +11537,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -11273,7 +11742,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -11505,7 +11986,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -11596,7 +12089,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -11982,7 +12487,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -12145,7 +12662,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -12382,7 +12911,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -12619,7 +13160,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -12894,7 +13447,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -12988,7 +13553,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -13389,7 +13966,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -13558,7 +14147,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -13804,7 +14405,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -14050,7 +14663,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
             >
               <span class="pf-v6-c-button__icon">
                 <div class="pf-v6-c-table__toggle-icon">
-                  <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                    />
+                  </svg>
                 </div>
               </span>
             </button>
@@ -15367,7 +15992,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -15463,7 +16100,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -15545,7 +16194,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -15630,7 +16291,19 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -18188,8 +18861,8 @@ Width modifiers control the width of the columns. To control the responsive beha
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Hides a table cell at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Shows a table cell at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Hides a table cell at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Shows a table cell at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Text control modifiers
 
@@ -21203,7 +21876,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           >
             <span class="pf-v6-c-button__icon">
               <div class="pf-v6-c-table__toggle-icon">
-                <i class="fas fa-angle-down" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -21301,7 +21986,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           >
             <span class="pf-v6-c-button__icon">
               <div class="pf-v6-c-table__toggle-icon">
-                <i class="fas fa-angle-down" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -21396,7 +22093,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           >
             <span class="pf-v6-c-button__icon">
               <div class="pf-v6-c-table__toggle-icon">
-                <i class="fas fa-angle-down" aria-hidden="true"></i>
+                <svg
+                  class="pf-v6-svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                  />
+                </svg>
               </div>
             </span>
           </button>
@@ -23672,7 +24381,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-draggable-rows-row-1-draggable-button table-draggable-rows-row-1-node"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-grip-vertical" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 320 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
           </span>
         </button>
       </td>
@@ -23701,7 +24422,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-draggable-rows-row-2-draggable-button table-draggable-rows-row-2-node"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-grip-vertical" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 320 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
           </span>
         </button>
       </td>
@@ -23731,7 +24464,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-draggable-rows-row-3-draggable-button table-draggable-rows-row-3-node"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-grip-vertical" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 320 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
           </span>
         </button>
       </td>
@@ -23760,7 +24505,19 @@ For sticky columns to function correctly, the parent table's width must be contr
           aria-labelledby="table-draggable-rows-row-4-draggable-button table-draggable-rows-row-4-node"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-grip-vertical" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 320 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
           </span>
         </button>
       </td>
@@ -24027,7 +24784,19 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -24123,7 +24892,19 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -24205,7 +24986,19 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>
@@ -24290,7 +25083,19 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
         >
           <span class="pf-v6-c-button__icon">
             <div class="pf-v6-c-table__toggle-icon">
-              <i class="fas fa-angle-down" aria-hidden="true"></i>
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                />
+              </svg>
             </div>
           </span>
         </button>