@infograf768 test with your component please.

I have tested this item ✅ successfully on d553f24

I have tested this item ✅ successfully on d553f24

RTC

@N6REJ Can you see why the icons under Default is not centered? Thanks.

@Quy
[class*=" icon-"]:not(.input-group-text), [class^=icon-]:not(.input-group-text) has a different fontsize (14px) then
.tbody-icon [class*=" fa-"], .tbody-icon [class*=" icon-"], .tbody-icon [class^=fa-], .tbody-icon [class^=icon-] (26px)
I think @Eighke was working on the css?

@Quy

and

need to happen but every time I do & run npm ci, fontawesome is reverted to 14px.

It is hard to see from your screenshot but it looks like the file you are editing is the css and not the scss file

If you meant that you edited the _icons.scss file as in the second image result and then the result after npm was as you showed in the first image. Then I just did that and the resulting css was 14px

@N6REJ This PR does not have any unwanted consequences on my component.

One possible solution for the star position is an override

diff --git a/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss b/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss
index 760ebd6..f4febcb 100644
--- a/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss
+++ b/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss
@@ -16,2 +16,8 @@
   float: left;
 }
+
+[class^="icon-"]:not(.input-group-text),
+[class*=" icon-"]:not(.input-group-text) {
+  width: auto;
+  height: auto;
+}

which gives

up

Tks. I'm merging this now as it is RTC. I will reeopen #29957 so that we do not forget to try to solve the alignment issue.