cssでアイコンとテキストを横並びにする方法

はじめに

cssでアイコンとテキストを横並びにする方法で躓いたので，備忘録としてまとめます．

前提

以下のようなコンポーネントで，ボタンの中にアイコンとテキストを横並びにすることを考えています．（jsxの書き方となっています．）

<button className="icon-button" onClick={onClick}>
  <span className="icon">{icon}</span>
  <span className="label">{label}</span>
</button>

display:flexを使用する

親要素にdisplay:flexをあて，align-items: center;とすることで，ボタンの中身のアイコンと文字を横並びで垂直方向を揃えることができます．

.icon-button {
  display: flex;
  align-items: center;
  
  .icon {
    display: flex;
    align-items: center;
  }
}