0

I have an icon and text next to each other in a span element. I have tried using padding and margin on the icon and/or text. The padding applies to the whole row instead of just the icon itself which is about 1rem too high.

[Edit] I would like to see centered VERTICALLY:

Instead, the icon is a tad too high. 

 <span><mat-icon>arrow_left_alt</mat-icon>Drag workflow </span>
Christopher You
  • 53
  • 1
  • 13

2 Answers2

2

adds a class to your span

.btn_container {
   display: flex;
   flex-direction: row;
   justify-content: center;
}
Robdll
  • 5,865
  • 7
  • 31
  • 51
1

Give the icon a relative position and move it down slightly:

<span><mat-icon style="position:relative; top:3px;">arrow_left_alt</mat-icon>Drag workflow </span>

You'll have to adjust the value of 3px, the higher it is, the further down the icon will move.

Other answers may give you methods of centering the object properly, but the actual centre might not be the same as the visual centre. I would use this method and simply adjust by eye to get the best result.

Run_Script
  • 2,487
  • 2
  • 15
  • 30
  • 1
    Sucks they demoted me on this question. It is not purely about centering objects, but the fact that you can CSS the icon with relative position to avoid adding unnecessary wrappers. – Christopher You May 06 '20 at 21:54