Icons: Adds custom icon support ands new panel and interpolation icons (#30277)

* Icons: Adds custom icon support ands new panel and interpolation icons

* Removed icon files

* updated snapshot

* Updates

public/app/core/components/sidemenu/TopSectionItem.test.tsx

@@ -7,6 +7,7 @@ const setup = (propOverrides?: object) => {
     {
       link: {
         text: 'Hello',
+        icon: 'cloud',
         url: '/asd',
       },
     },

public/app/core/components/sidemenu/TopSectionItem.tsx

@@ -8,14 +8,12 @@ export interface Props {
   onClick?: () => void;
 }
 
-const TopSectionItem: FC<Props> = props => {
-  const { link, onClick } = props;
-
+const TopSectionItem: FC<Props> = ({ link, onClick }) => {
   return (
     <div className="sidemenu-item dropdown">
       <a className="sidemenu-link" href={link.url} target={link.target} onClick={onClick}>
         <span className="icon-circle sidemenu-icon">
-          <Icon name={link.icon as any} size="xl" />
+          {link.icon && <Icon name={link.icon as any} size="xl" />}
           {link.img && <img src={link.img} />}
         </span>
       </a>

public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Render should render component 1`] = `
 <TopSectionItem
   link={
     Object {
+      "icon": "cloud",
       "text": "Hello",
       "url": "/asd",
     }
@@ -20,15 +21,38 @@ exports[`Render should render component 1`] = `
         className="icon-circle sidemenu-icon"
       >
         <Icon
+          name="cloud"
           size="xl"
         >
-          <div />
+          <div
+            className="css-1vzus6i-Icon"
+          >
+            <ni
+              className="css-sr6nr"
+              color="currentColor"
+              size={24}
+            >
+              <svg
+                className="css-sr6nr"
+                fill="currentColor"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18.42,9.21a7,7,0,0,0-13.36,1.9A4,4,0,0,0,6,19H17a5,5,0,0,0,1.42-9.79ZM17,17H6a2,2,0,0,1,0-4,1,1,0,0,0,1-1,5,5,0,0,1,9.73-1.61,1,1,0,0,0,.78.66A3,3,0,0,1,17,17Z"
+                />
+              </svg>
+            </ni>
+          </div>
         </Icon>
       </span>
     </a>
     <SideMenuDropDown
       link={
         Object {
+          "icon": "cloud",
           "text": "Hello",
           "url": "/asd",
         }