[Chip] Alignment fix (#13536)

* add box-sizing: border-box to chip root class to prevent misalignment for bordered chips. #13533

* add 1px horizontal adjustment of chip avatar if variant='outlined' to account for horizontal misalignment. #13533

* add space in between icon prop and following prop in chip playground JSX code display to prevent markdown parser from misinterpreting the code block. #13532

* [docs] Update chip API

* remove the style rule

docs/src/pages/demos/chips/ChipsPlayground.js

@@ -72,7 +72,7 @@ class ChipsPlayground extends React.Component {
         iconToCode = '';
         break;
       default:
-        iconToCode = 'icon={<FaceIcon />}';
+        iconToCode = 'icon={<FaceIcon />} ';
         iconToPlayground = <FaceIcon />;
         break;
     }

packages/material-ui/src/Chip/Chip.js

@@ -38,6 +38,7 @@ export const styles = theme => {
       border: 'none', // Remove `button` border
       padding: 0, // Remove `button` padding
       verticalAlign: 'middle',
+      boxSizing: 'border-box',
     },
     /* Styles applied to the root element if `color="primary"`. */
     colorPrimary: {
@@ -112,6 +113,9 @@ export const styles = theme => {
       '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
         backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       },
+      '& $avatar': {
+        marginLeft: -1,
+      },
     },
     /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
     outlinedPrimary: {