We were using the classic approach of adding a margin-right property to
all elements except the last one. This works great when all icons are
displayed in one row.
However, when they're displayed in several rows, there could be a
scenario where the last row has more elements:
element1 <margin> element2 <margin>
element3 <margin> element4 <margin> element5
In the example above, `element3` does not fit in the first row because
it's got a margin to its right. However, `element5` fits in the second
row because the last element has now right margin.
One option to fix this issue it using CSS `gap` property. However, at
the time of writing, it's only supported by 70% of the browsers.
So we're emulating the gap by giving a negative margin to the list
equivalent to the margin of the first element.
This idea is based on:
https://coryrylan.com/blog/css-gap-space-with-flexbox
The exception is the index page. Here the list of icons is centered with
`margin: auto`, and so we cannot use negative margins. We're using the
classic approach instead, which is fine because we define there are 6
icons per row.
0b84c0da01