I made a post recently regarding how it would be nice if we had the ability to assign a background to buttons displayed in our row actions on a table component for to improve UX, end-user accessibility, and action clarity in apps.
Since that functionality is currently not offered out of the box, I happened to find a temporary custom CSS solution if anyone else is interested. Just be sure all your tables have a name ending with 'Table', i.e. 'firstTable', 'secondTable', etc. Also, be sure to update the data-testid value for each svg[data-testid="Icon::bold/interface-add-circle"] svg element's data-testid attribute so it matches the string value of whatever icon you are using for your row action:
[id*="Table"] > [class*="_content_"] [class*="_outer_"] [class*="_grid_"] [class*="_main_"] {
button:has(svg[data-testid="Icon::bold/interface-add-circle"]) {
background: {{ theme.automatic[4] }};
outline: 1px ridge {{ theme.surfacePrimary }};
svg[data-testid="Icon::bold/interface-add-circle"] {
fill: {{ theme.primary }};
}
}
button:has(svg[data-testid="Icon::bold/interface-delete-circle"]) {
background: {{ theme.automatic[0] }};
outline: 1px ridge {{ theme.surfacePrimary }};
svg[data-testid="Icon::bold/interface-delete-circle"] {
fill: {{ theme.danger }};
}
}
button:has(svg[data-testid="Icon::bold/interface-edit-pencil"]) {
background: {{ theme.automatic[2] }};
outline: 1px ridge {{ theme.surfacePrimary }};
svg[data-testid="Icon::bold/interface-edit-pencil"] {
fill: {{ theme.tertiary }};
}
}
This allows you to assign a background color to the button, an outline or border (if desired), and a fill color to the svg/icon that is in your button element.
Happy coding! 
