cap heightで要素内のアイコンをちょうどいい感じにする

capという単位を使うと、アルファベットのベースライン〜キャップラインの高さを表現することができる。

よくあるケース

以下のコードは、Iconに対して都度height/widthをpx指定（絶対値指定）するため、ユーザー環境のデフォルトフォントサイズが変更したときに表示が崩れる。

<Button>
  <Icon height="24px" width="24px" />
  Submit
</Button>

cap heightを使ったケース

capは相対値なのでheight: 1capとするだけでいい感じにアイコンが収まってくれる。 また、Button要素のfont-sizeに連動してIcon要素のサイズも変わるので変更に強い。（emやchと同じように使える）

<Button>
  <Icon height="1cap" />
  Submit
</Button>

ちなみに日本語UIであれば「水」という漢字を基準にしているicという単位のほうが良いかもしれない。

<Button>
  <Icon height="1ic" />
  Submit
</Button>

デモ

<button
  type="button"
  style="
    display: flex;
    align-items: center;
    font-size: 2rem;"
>
  <img
    src="https://avatars.githubusercontent.com/u/5305599?v=4"
    style="height: 1ic;"
  />
  <span>送信する</span>
</button>

送信する