Put an icon inside a circle

Admin 1
Viewed 8158

enter image description here

I am doing a project, but this project has a verification email page, and I want to put an email icon at the beginning of this interface, but around a circle and I could not? How can I put an icon around a circle?

react-typescript material-ui
2 Answers

Use an Icon Avatar. Documentation here.

Here's a working CodeSandbox.

Example:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import EmailIcon from '@material-ui/icons/Email';

const useStyles = makeStyles((theme) => ({
  avatar: {
    backgroundColor: theme.palette.grey[50],
    border: `1px solid ${theme.palette.info.main}`,
    color: theme.palette.info.main,
  },
}));

export default function EmailAvatar() {
  const classes = useStyles();
  return (
    <Avatar className={classes.avatar}>
      <EmailIcon />
    </Avatar>
  );
}
user_70403660

If it is a button - Put the Icon component inside IconButton and apply border for it.

emailIconButton: {
  border: "solid 2px", // Color will be detected from IconButton color prop
}

If not, just wrap it with a div and apply simple border styles for it.

JSS example:

emailIconWrapper: {
  padding: theme.spacing(1.5),
  borderRadius: "50%",
  borderStyle: "solid",
  borderWidth: "2px",
  borderColor: theme.palette.primary.main,
}

CSS example:

.email-icon-wrapper {
  padding: 12px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: lightblue;
}
user_158656110
Related