office ui fabric icon inside a circle

Question

The following code puts an icon inside a circle:

<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,
} 

The result is not as expected.

Update: Based on the below solution, I got it working. But I'm still unable to put the icon in the center of the circle and the icon & circle are not in the center of the banner:

Now, I have the following code to put an icon inside a circle and in the center of the circle. The icon is still not in the center and the circle is not aligned to 'Cafe'.

<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'
    }

Answer 1

10% or 10px are not sufficient :) To create a circle, use a border radius of 50%. To center the image, you can use Flexbox.

This could be an option for you:

.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>

Learn more about Flexbox. There are probably also other options.

---

Here's an update (after you have edited the question). Note that the answer above is still valid. Flexbox will help you :)

Here's what I did to generate a circle and center an image:

• cleaned up your CSS a bit to center things (mainly paddings)
• added display:flex to the tab class
• added a big test image.
• added a .circle img selector to the CSS to scale the image to the circle dimensions.

Result:

I hope this helps.

body, html {
  margin: 0;
}

.tab {
  background-color: #0078d7;
  height: 40px;
  color: white;
  box-sizing: border-box;
  padding-left: 20px;
  padding-block: 10px;
  display: flex;
  align-items: center;
}

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

.circle img {
  max-width: 100%;
  height: auto;
}

.tabContent {
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding-left: 15px;
}

<div class="tab">
  <div class="circle">
    <div class="circle">
      <img src="https://cdn.pixabay.com/photo/2014/06/03/19/38/road-sign-361514_1280.png" alt="Placeholder Image">
    </div>
  </div>
  <div class="tabContent">
    Tab Content
  </div>
</div>