MUI) Material Iconの画像位置を調整したかったときの話 #React

この記事の対象者

Reactの
Material UI の中で
IconButton の上に
Material Icons を乗せつつ
Icon の位置を調整したい

そんな方にお送りします。

戻るとか、進むのボタンをArrowBackIosNew, ArrowForwadIos で表現したかった。

でも、丸い背景に乗せると、ちょっとズレて見えてしまう。

この錯覚を解消するために、Arrowの部分をずらしたかったのにずいぶん苦戦しちゃった…💦

という内容です。

TL;DL

結論

Material Iconのpropsに sx={{'&.MuiSvgIcon-root': {marginLeft: '2px'}}} のような形で子要素のclassにスタイルを当てればOK

&.MuiSvgIcon-root …こんな書き方知らないよー＼(^o^)／

コード概要

MUIのButtonにMaterial Iconを単純に乗せた場合のコードは下記の通り。

(Buttonのサイズは32px × 32pxの真円、中のIconは24pxとしました)

import {Box, IconButton} from '@mui/material'

exprot default function HogeView() {
    return (
        <>
            <IconButton sx={{width: '32px', height: '32px'}}>
                <ArrowBackIosNew/>
            <IconButton/>
            <IconButton sx={{width: '32px', height: '32px'}}>
                <ArrowForwardIos/>
            <IconButton/>
        </>
    )

このままの表示だと、

ArrowBackIosNewの＜の形が、円の中心からやや右にズレた位置にあるように見える。

(実際はセンターに配置されているが、錯覚でズレて見えてしまう)

雑なイメージだと、

( <)

こんな感じ。

ので、少しだけ左に＜の位置をシフトさせたい。

その場合は、IconのSvgの要素に対して、marginをつけてあげればよいので、

import {Box, IconButton} from '@mui/material'

exprot default function HogeView() {
    return (
        <>
            <IconButton sx={{width: '32px', height: '32px'}}>
                <ArrowBackIosNew sx={{'&.MuiSvgIcon-root': {marginRight: '2px'}}}/>
            <IconButton/>
            <IconButton sx={{width: '32px', height: '32px'}}>
                <ArrowForwardIos sx={{'&.MuiSvgIcon-root': {marginLeft: '2px'}}}/>
            <IconButton/>
        </>
    )

としてあげればよい。
※ArrowForwrdIosの場合は逆で、右にズラすのでmarginLeftを入れる。

classの指定について

開発者ツールで要素を確認してみると、

Material Iconの要素の中に子要素としてIcon画像の要素が存在していることがわかる。

class名として色々と付与されているので、

今回はそのせんのものを選択して値を指定した。

学び

まだまだ開発者ツールとお友達になれていないので、

使い方をもっと触って覚えていきたい…というのと、

Arrowの位置ズレが、Iconの重心位置の関係でズレて見えるという事を踏まえて、

1px単位で調整の指定をするデザイナーさん、すげぇわ。

MUI) Material Iconの画像位置を調整したかったときの話

この記事の対象者

目次

TL;DL

コード概要

classの指定について

学び