Adjust CommandBarButton of Fluent UI

Question

I would like to adjust a little bit CommandBarButton of Fluent UI. I want to move the icon a little down by adding a padding on top of it. I try to add padding: 1px 0px 0px 0px inside .icon-112 in DevTools. It is perfect.

So I add the following in CSS:

.move .ms-Button-Icon {
  padding: 10px 0px 0px 0px; /* 10px to make it obvious */
}

And use move in

<CommandBarButton
  className="move"
  iconProps={{ iconName: "Comment" }}
  text="Comment"
/>

But it does not work; we don't see the extra padding anywhere. Does anyone know why?

https://codesandbox.io/s/dreamy-glade-qu8g29?file=/src/App.js:200-314

Answer 1

.move .ms-Button-icon {
  padding: 10px 0px 0px 0px; /* 10px to make it obvious */
}

It's .ms-Button-icon not .ms-Button-Icon lol