MUI(Material-UI)のアイコンにフチドリをつけます。

f:id:yucatio:20211017140609p:plain

通常のCSSのスタイルと同様にstrokeとstrokeWidthを指定します。strokeOpacityやstrokeLinejoinなども指定できます。

コード

<StarIcon
  sx={{color: yellow[500], stroke: yellow[900], strokeWidth: 4, strokeOpacity: 0.2}}
/>

全ソースコード

import React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import StarIcon from '@mui/icons-material/Star';
import FavoriteIcon from '@mui/icons-material/Favorite';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import AppleIcon from '@mui/icons-material/Apple';
import BedtimeIcon from '@mui/icons-material/Bedtime';
import CloudIcon from '@mui/icons-material/Cloud';
import { blue, grey, red, pink, yellow } from '@mui/material/colors';

function App() {
  return (
    <Box sx={{p:2}}>
      <Typography variant="h6">通常</Typography>
      <Stack spacing={2} direction="row">
        <StarIcon sx={{color: yellow[500]}} />
        <FavoriteIcon sx={{color: pink[500]}} />
        <AddCircleIcon sx={{color: blue[500]}} />
        <AppleIcon sx={{color: red[500]}} />
        <BedtimeIcon sx={{color: yellow[600]}} />
        <CloudIcon sx={{color: grey[500]}} />
      </Stack>

      <Typography variant="h6">フチドリあり</Typography>
      <Stack spacing={2} direction="row">
        <StarIcon sx={{color: yellow[500], stroke: yellow[900], strokeWidth: 4, strokeOpacity: 0.2}} />
        <FavoriteIcon sx={{color: pink[500], stroke: pink[900], strokeWidth: 4, strokeOpacity: 0.2}} />
        <AddCircleIcon sx={{color: blue[500], stroke: blue[800], strokeWidth:4, strokeOpacity: 0.2}} />
        <AppleIcon sx={{color: red[500], stroke:red[900], strokeWidth: 4, strokeOpacity: 0.2}} />
        <BedtimeIcon sx={{color: yellow[600], stroke: yellow[900], strokeWidth: 4, strokeOpacity: 0.2}} />
        <CloudIcon sx={{color: grey[500], stroke:grey[800], strokeWidth: 4, strokeOpacity: 0.2}} />
      </Stack>
    </Box>
  );
}
export default App;