Fix: Tab icons not showing (#21465)

* revert back to i element

* snap

packages/grafana-ui/src/components/Tabs/Tab.tsx

 import React, { FC } from 'react';
 import React, { FC } from 'react';
 import { cx } from 'emotion';
 import { cx } from 'emotion';
-import { Icon } from '..';
 import { useTheme } from '../../themes';
 import { useTheme } from '../../themes';
-import { IconType } from '../Icon/types';
 import { getTabsStyle } from './styles';
 import { getTabsStyle } from './styles';
 
 
 export interface TabProps {
 export interface TabProps {
   label: string;
   label: string;
   active?: boolean;
   active?: boolean;
-  icon?: IconType;
+  icon?: string;
   onChangeTab: () => void;
   onChangeTab: () => void;
 }
 }
 
 
@@ -18,7 +16,7 @@ export const Tab: FC<TabProps> = ({ label, active, icon, onChangeTab }) => {
 
 
   return (
   return (
     <li className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)} onClick={onChangeTab}>
     <li className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)} onClick={onChangeTab}>
-      {icon && <Icon name={icon} />}
+      {icon && <i className={icon} />}
       {label}
       {label}
     </li>
     </li>
   );
   );

packages/grafana-ui/src/components/Tabs/TabsBar.story.tsx

@@ -26,7 +26,12 @@ const tabs = [
 export const Simple = () => {
 export const Simple = () => {
   const VISUAL_GROUP = 'Visual options';
   const VISUAL_GROUP = 'Visual options';
   // ---
   // ---
-  const icon = select('Icon', { None: undefined, Heart: 'heart', Star: 'star', User: 'user' }, undefined, VISUAL_GROUP);
+  const icon = select(
+    'Icon',
+    { None: undefined, Heart: 'fa fa-heart', Star: 'fa fa-star', User: 'fa fa-user' },
+    undefined,
+    VISUAL_GROUP
+  );
   return (
   return (
     <UseState initialState={tabs}>
     <UseState initialState={tabs}>
       {(state, updateState) => {
       {(state, updateState) => {

public/app/core/components/PageHeader/PageHeader.tsx

@@ -64,6 +64,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
               label={child.text}
               label={child.text}
               active={child.active}
               active={child.active}
               key={`${child.url}-${index}`}
               key={`${child.url}-${index}`}
+              icon={child.icon}
               onChangeTab={() => goToUrl(index)}
               onChangeTab={() => goToUrl(index)}
             />
             />
           );
           );

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

@@ -100,6 +100,9 @@ exports[`ServerStats Should render table with stats 1`] = `
                     className="css-b418eg"
                     className="css-b418eg"
                     onClick={[Function]}
                     onClick={[Function]}
                   >
                   >
+                    <i
+                      className="icon"
+                    />
                     Admin
                     Admin
                   </li>
                   </li>
                 </ul>
                 </ul>