Icon positioning within tables

Icons in Vanilla framework fit within a 1rem square. When placing icons in a table, it should be clear which value the icons are associated with. To achieve that, the space between icon and its associated text should be less than the space between an icon and an unrelated value. In the screen below, this is achieved by fixing the space between value and associated icon at .5rem, and ensuring at least 1rem of space between text in adjacent columns. Resizing increases the latter distance, but has no effect on the former.

In the following example:

  • Icons for the “Status” column stay at a fixed distance (.5rem) from the status text. Lack of an icon (as in the third row) does not disrupt the alignment of text in the status column. Resizing the table does not affect the spacing between status icon and status text.

  • Preferably, icon position follows alignment - this is to ensure the icons are aligned as well.
    There are cases when this rule can be disregarded. For example, keeping icons in separate columns would result in gaps that make it unclear which value the 3rd row edit icon is associated with:

What would happen if we have a right-aligned column is to the left of a left-aligned column and both have icons? Wouldn’t that look very confusing?

E.g. if we move the RAM column in place of the FQDN column?

By default, this:

Since the space between unrelated items is doubled, I don’t think it will be confusing. But, as with the edit/warning icon in the last column, it is a matter of judgement. Depending on the situation, the default rules can be overriden to create a more pleasing result. E.g. either set of icons can be moved on the ragged edge side of the text.

@lilyanavidenova @lyubomir-popov

To discuss the pattern itself please refer to this category:
And to this topic in particular for this case: Modular table component

You can copy the relevant link/image in there and comment. This thread is for the output/guidelines only,can you please move your comments in there?

Thank you

(moved to pattern discussion)