[Emotion] Convert EuiIcon

src-docs/src/views/icon/playground.js

@@ -9,7 +9,8 @@ export default () => {
   const docgenInfo = Array.isArray(EuiIcon.__docgenInfo)
     ? EuiIcon.__docgenInfo[0]
     : EuiIcon.__docgenInfo;
-  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  const propsToUse = propUtilityForPlayground(docgenInfo.props, true);
 
   propsToUse.type = iconValidator({ ...propsToUse.type }, 'grid');
 

src/components/badge/badge.tsx

@@ -84,7 +84,7 @@ export type EuiBadgeProps = {
   /**
    * Props passed to the close button.
    */
-  closeButtonProps?: Partial<PropsOf<EuiIcon>>;
+  closeButtonProps?: Partial<PropsOf<typeof EuiIcon>>;
 } & CommonProps &
   ExclusiveUnion<WithIconOnClick, {}> &
   ExclusiveUnion<

src/components/form/form_control_layout/_form_control_layout.scss

@@ -1,10 +1,8 @@
-@import '../../icon/variables';
-
 .euiFormControlLayout {
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);
 
-  $iconSize: map-get($euiIconSizes, 'medium');
+  $iconSize: map-get($euiFormControlIconSizes, 'medium');
   $iconPadding: $euiFormControlPadding;
   $marginBetweenIcons: $euiFormControlPadding / 2;
 
@@ -16,7 +14,7 @@
       padding-right: $iconPadding + ($iconSize + $marginBetweenIcons) * $i;
 
       &[class*='compressed'] {
-        $iconSizeCompressed: map-get($euiIconSizes, 'small');
+        $iconSizeCompressed: map-get($euiFormControlIconSizes, 'small');
         $iconPaddingCompressed: $euiFormControlCompressedPadding;
 
         padding-right: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i;