Icons: use plain SVG files, load on-demand (#32387)

public/app/app.ts

@@ -4,9 +4,10 @@ import 'regenerator-runtime/runtime';
 
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering
-
 import 'file-saver';
 import 'jquery';
+import '@grafana/ui/src/components/Icon/iconBundle';
+
 import _ from 'lodash';
 import ReactDOM from 'react-dom';
 import React from 'react';

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

@@ -83,24 +83,14 @@ exports[`Render should render component 1`] = `
                     <div
                       className="css-1vzus6i-Icon"
                     >
-                      <ni
+                      <InlineSVG
+                        cacheRequests={true}
                         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>
+                        height={24}
+                        src="/public/img/icons/unicons/cloud.svg"
+                        uniquifyIDs={false}
+                        width={24}
+                      />
                     </div>
                   </Icon>
                 </span>