以下代碼將一個圖標放在一個圓內:

<div className={classNames.left}>
  <div className={classNames.icon}><AddFriendIcon /> </div>
  <div> Add a Friend </div>
</div>

left: {
  float: 'left'
},
icon: {
  border: "solid 2px",
  borderRadius: 10,
}

結果不如預期。

更新:基于下面的解決方案，我得到了它的工作。但是我仍然不能把圖標放在圓圈的中心。圓圈不在橫幅的中心:

現在，我有了下面的代碼來把一個圖標放在一個圓的內部和中心。圖標仍然不在中心，圓圈也沒有與“咖啡館”對齊。

<div className={classNames.root} role="banner" aria-label="header">
        <div className={classNames.tabContent}> <div className={classNames.circle}><div className={classNames.icon}><CafeIcon /></div> </div> </div>
        <div className={classNames.tabContent}> Cafe </div>
      </div>

root: [
      {
        backgroundColor: theme.palette.themePrimary,
        height: 40,
        color: 'white',
        maxWidth: "100%",
        margin: '0 auto',
        borderBottom: '1px solid transparent',
        boxSizing: 'border-box',
        paddingLeft: 20,
        paddingTop: 10
      },
      className
    ],
    circle: {
      border: 'solid 2px',
      borderRadius: '50%',
      background: 'white',
      height: 20,
      width: 20,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }, 
    tabContent: {
      color: 'white',
      float: 'left',
      border: 'none',
      outline: 'none',
      cursor: 'pointer',
      paddingLeft: 15
    },
    icon: {
      color: '#0078d7'
    }

10%或10px是不夠的:)要創建一個圓，使用50%的邊界半徑。要使圖像居中，可以使用Flexbox。

這可能是你的一個選擇:

.circle {
  border: solid 2px;
  border-radius: 50%;
  background: white;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="left">
  <div class="circle">
    <div class="icon">image</div>
  </div>
</div>