[Graph] Replace Fontawesome with EUI + Maki icons

x-pack/plugins/graph/public/application.tsx

@@ -30,7 +30,6 @@ import { Start as InspectorPublicPluginStart } from '@kbn/inspector-plugin/publi
 import { TableListViewKibanaProvider } from '@kbn/content-management-table-list-view-table';
 
 import './index.scss';
-import('./font_awesome');
 import { SpacesApi } from '@kbn/spaces-plugin/public';
 import { KibanaThemeProvider, toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';

x-pack/plugins/graph/public/components/_index.scss

@@ -5,7 +5,6 @@
 @import './graph_visualization/index';
 @import './venn_diagram/index';
 @import './settings/index';
-@import './legacy_icon/index';
 @import './field_manager/index';
 @import './graph';
 @import './sidebar';

x-pack/plugins/graph/public/components/control_panel/control_panel_tool_bar.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { ControlType, Workspace, WorkspaceField } from '../../types';
 
 interface ControlPanelToolBarProps {
@@ -90,138 +90,126 @@ export const ControlPanelToolBar = ({
     <EuiFlexGroup gutterSize="xs" responsive={false}>
       <EuiFlexItem grow={false}>
         <EuiToolTip content={undoButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
+          <EuiButtonIcon
+            iconType={'editorUndo'}
+            size="xs"
             aria-label={undoButtonMsg}
-            type="button"
+            isDisabled={workspace.undoLog.length < 1}
             onClick={onUndoClick}
-            disabled={workspace.undoLog.length < 1}
-          >
-            <span className="kuiIcon fa-history" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={redoButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
+          <EuiButtonIcon
+            iconType="editorRedo"
+            size="xs"
             aria-label={redoButtonMsg}
-            type="button"
+            isDisabled={workspace.redoLog.length === 0}
             onClick={onRedoClick}
-            disabled={workspace.redoLog.length === 0}
-          >
-            <span className="kuiIcon fa-repeat" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={expandButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
+          <EuiButtonIcon
+            iconType="plus"
+            size="xs"
             aria-label={expandButtonMsg}
-            disabled={liveResponseFields.length === 0 || workspace.nodes.length === 0}
+            isDisabled={liveResponseFields.length === 0 || workspace.nodes.length === 0}
             onClick={onExpandButtonClick}
-          >
-            <span className="kuiIcon fa-plus" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={addLinksButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
+          <EuiButtonIcon
+            iconType="link"
+            size="xs"
             aria-label={addLinksButtonMsg}
-            disabled={haveNodes}
+            isDisabled={haveNodes}
             onClick={onAddLinksClick}
-          >
-            <span className="kuiIcon fa-link" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={removeVerticesButtonMsg}>
-          <button
+          <EuiButtonIcon
             data-test-subj="graphRemoveSelection"
-            className="kuiButton kuiButton--basic kuiButton--small"
-            disabled={haveNodes}
+            iconType="trash"
+            size="xs"
             aria-label={removeVerticesButtonMsg}
+            isDisabled={haveNodes}
             onClick={onRemoveVerticesClick}
-          >
-            <span className="kuiIcon fa-trash" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={blocklistButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
-            disabled={workspace.selectedNodes.length === 0}
+          <EuiButtonIcon
+            iconType="eyeClosed"
+            size="xs"
             aria-label={blocklistButtonMsg}
+            isDisabled={workspace.selectedNodes.length === 0}
             onClick={onBlockListClick}
-          >
-            <span className="kuiIcon fa-ban" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={customStyleButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
-            disabled={workspace.selectedNodes.length === 0}
+          <EuiButtonIcon
+            iconType="brush"
+            size="xs"
             aria-label={customStyleButtonMsg}
+            isDisabled={workspace.selectedNodes.length === 0}
             onClick={onCustomStyleClick}
-          >
-            <span className="kuiIcon fa-paint-brush" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
         <EuiToolTip content={drillDownButtonMsg}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
-            disabled={haveNodes}
+          <EuiButtonIcon
+            iconType="iInCircle"
+            size="xs"
             aria-label={drillDownButtonMsg}
+            isDisabled={haveNodes}
             onClick={onDrillDownClick}
-          >
-            <span className="kuiIcon fa-info" />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
 
       {(workspace.nodes.length === 0 || workspace.force === null) && (
         <EuiFlexItem grow={false}>
           <EuiToolTip content={runLayoutButtonMsg}>
-            <button
+            <EuiButtonIcon
               data-test-subj="graphResumeLayout"
-              className="kuiButton kuiButton--basic kuiButton--small"
-              disabled={workspace.nodes.length === 0}
+              iconType="playFilled"
+              size="xs"
               aria-label={runLayoutButtonMsg}
+              isDisabled={workspace.nodes.length === 0}
               onClick={onRunLayoutClick}
-            >
-              <span className="kuiIcon fa-play" />
-            </button>
+            />
           </EuiToolTip>
         </EuiFlexItem>
       )}
 
       {workspace.force !== null && workspace.nodes.length > 0 && (
         <EuiFlexItem grow={false}>
           <EuiToolTip content={pauseLayoutButtonMsg}>
-            <button
+            <EuiButtonIcon
               data-test-subj="graphPauseLayout"
-              className="kuiButton kuiButton--basic kuiButton--small"
+              iconType="pause"
+              size="xs"
               aria-label={pauseLayoutButtonMsg}
               onClick={onPauseLayoutClick}
-            >
-              <span className="kuiIcon fa-pause" />
-            </button>
+            />
           </EuiToolTip>
         </EuiFlexItem>
       )}

x-pack/plugins/graph/public/components/control_panel/drill_down_icon_links.tsx

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 import { UrlTemplate } from '../../types';
+import { IconRenderer } from '../icon_renderer';
 
 interface UrlTemplateButtonsProps {
   urlTemplates: UrlTemplate[];
@@ -21,7 +22,7 @@ export const DrillDownIconLinks = ({
   openUrlTemplate,
 }: UrlTemplateButtonsProps) => {
   const drillDownsWithIcons = urlTemplates.filter(
-    ({ icon }: UrlTemplate) => icon && icon.class !== ''
+    ({ icon }: UrlTemplate) => icon && icon.id !== ''
   );
 
   if (drillDownsWithIcons.length === 0) {
@@ -34,14 +35,12 @@ export const DrillDownIconLinks = ({
     return (
       <EuiFlexItem grow={false}>
         <EuiToolTip content={cur.description}>
-          <button
-            className="kuiButton kuiButton--basic kuiButton--small"
-            type="button"
-            disabled={hasNodes}
+          <EuiButtonIcon
+            iconType={cur.icon ? () => <IconRenderer icon={cur.icon} /> : ''}
+            size="xs"
+            isDisabled={hasNodes}
             onClick={onUrlTemplateClick}
-          >
-            <span className={`kuiIcon ${cur.icon?.class || ''}`} />
-          </button>
+          />
         </EuiToolTip>
       </EuiFlexItem>
     );

x-pack/plugins/graph/public/components/control_panel/drill_downs.tsx

@@ -7,7 +7,9 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiIcon } from '@elastic/eui';
 import { UrlTemplate } from '../../types';
+import { IconRenderer } from '../icon_renderer';
 
 interface DrillDownsProps {
   urlTemplates: UrlTemplate[];
@@ -18,7 +20,7 @@ export const DrillDowns = ({ urlTemplates, openUrlTemplate }: DrillDownsProps) =
   return (
     <div>
       <div className="gphSidebar__header">
-        <span className="kuiIcon fa-info" />
+        <EuiIcon type="iInCircle" />{' '}
         {i18n.translate('xpack.graph.sidebar.drillDownsTitle', {
           defaultMessage: 'Drill-downs',
         })}
@@ -41,7 +43,7 @@ export const DrillDowns = ({ urlTemplates, openUrlTemplate }: DrillDownsProps) =
               <li className="list-group-item">
                 {urlTemplate.icon && (
                   <>
-                    <span className="kuiIcon gphNoUserSelect">{urlTemplate.icon?.code}</span>{' '}
+                    <IconRenderer icon={urlTemplate.icon} className="gphNoUserSelect" />{' '}
                   </>
                 )}
                 <a aria-hidden="true" onClick={onOpenUrlTemplate}>

x-pack/plugins/graph/public/components/control_panel/merge_candidates.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { ControlType, TermIntersect, Workspace } from '../../types';
 import { VennDiagram } from '../venn_diagram';
 
@@ -44,7 +44,7 @@ export const MergeCandidates = ({
   return (
     <div className="gphSidebar__panel">
       <div className="gphSidebar__header">
-        <span className="kuiIcon fa-link" />
+        <EuiIcon type="link" />{' '}
         {i18n.translate('xpack.graph.sidebar.linkSummaryTitle', {
           defaultMessage: 'Link summary',
         })}
@@ -102,28 +102,26 @@ export const MergeCandidates = ({
           <div>
             <span>
               <EuiToolTip content={mergeTerm1ToTerm2ButtonMsg}>
-                <button
-                  type="button"
+                <EuiButtonIcon
+                  iconType="doubleArrowRight"
+                  size="xs"
                   style={{ opacity: 0.2 + mc.overlap / mc.v1 }}
-                  className="kuiButton kuiButton--basic kuiButton--small"
+                  aria-label={mergeTerm1ToTerm2ButtonMsg}
                   onClick={onMergeTerm1ToTerm2Click}
-                >
-                  <span className="kuiIcon fa-chevron-circle-right" />
-                </button>
+                />
               </EuiToolTip>
 
               <span className="gphLinkSummary__term--1">{mc.term1}</span>
               <span className="gphLinkSummary__term--2">{mc.term2}</span>
 
               <EuiToolTip content={mergeTerm2ToTerm1ButtonMsg}>
-                <button
-                  type="button"
-                  className="kuiButton kuiButton--basic kuiButton--small"
+                <EuiButtonIcon
+                  iconType="doubleArrowLeft"
+                  size="xs"
                   style={{ opacity: 0.2 + mc.overlap / mc.v2 }}
+                  aria-label={mergeTerm2ToTerm1ButtonMsg}
                   onClick={onMergeTerm2ToTerm1Click}
-                >
-                  <span className="kuiIcon fa-chevron-circle-left" />
-                </button>
+                />
               </EuiToolTip>
             </span>
 

x-pack/plugins/graph/public/components/control_panel/select_style.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiIcon } from '@elastic/eui';
 import { Workspace } from '../../types';
 
 interface SelectStyleProps {
@@ -18,7 +19,7 @@ export const SelectStyle = ({ colors, workspace }: SelectStyleProps) => {
   return (
     <div className="gphSidebar__panel">
       <div className="gphSidebar__header">
-        <span className="kuiIcon fa-paint-brush" />
+        <EuiIcon type="brush" size="s" />{' '}
         {i18n.translate('xpack.graph.sidebar.styleVerticesTitle', {
           defaultMessage: 'Style selected vertices',
         })}
@@ -31,11 +32,12 @@ export const SelectStyle = ({ colors, workspace }: SelectStyleProps) => {
             workspace.changeHandler();
           };
           return (
-            <span
+            <EuiIcon
+              type="stopFilled"
+              color={c}
+              className="gphColorPicker__color"
               aria-hidden="true"
               onClick={onSelectColor}
-              style={{ color: c }}
-              className="kuiIcon gphColorPicker__color fa-circle"
             />
           );
         })}