How to vertically align icon and text in React?

Question

https://codesandbox.io/embed/material-demo-g5pez?fontsize=14&hidenavigation=1&theme=dark

<span>
    {

        item.result.map((item, idx) => {
            return <span className="legend-label">
                <StopIcon />{item.metric}: {item.count}</span>
        })
    }
</span>

I am rendering material-icon and putting a text next to it. However, I am not sure how to make them vertically align with the RIGHT practice. Of course, I can put top or bottom attribute to style to make a tweak, but I believe that is not the right practice of doing this.

What is the right way to do this without generating a bad aftermath?

You can use `flex` or adjust the `line-height`, I believe alignment has nothing to do if it's `React` or not. — threeFatCat, Dec 09 '19 at 06:01

score 10 · Accepted Answer · answered Dec 09 '19 at 06:05

10

https://codesandbox.io/s/material-demo-u71qr

Just add some style to the legend-label:

display: inline-flex;
align-items: center;

answered Dec 09 '19 at 06:05

Loi Nguyen Huynh

8,492
2
29
52

score 1 · Answer 2 · answered Dec 09 '19 at 06:02

1

Making use of css flex is one option:

<span style={{ display:'inline-flex', alignItems: 'center' }} className="legend-label">
  <StopIcon style={{ color: palette[idx] }} />
  {item.metric}: {item.count}
</span>

answered Dec 09 '19 at 06:02

Ben Melville

11
1

akhtarvahid · Answer 3 · 2019-12-09T06:15:13.230

0

     <span>
        {objarr.map((item, idx) => {
          return (
            <span style={{display:'flex', alignItems:'center'}} className="legend-label">
              <StopIcon style={{ color: palette[idx] }} />
              {item.metric}: {item.count}
            </span>
          );
        })}
      </span>

edited Dec 09 '19 at 06:15

answered Dec 09 '19 at 06:02

akhtarvahid

9,445
2
26
29

applying `flex` alone doesn't have any effect. Have you tested it? – threeFatCat Dec 09 '19 at 06:08

How to vertically align icon and text in React?

3 Answers3