Alerting: Replace icons on for alerting (#25599)

* Update Alerting icons

* Keep critical red for alerting

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -8,7 +8,7 @@ import { IconName, IconType, IconSize } from '../../types/icon';
 import * as DefaultIcon from '@iconscout/react-unicons';
 import * as MonoIcon from './assets';
 
-const alwaysMonoIcons = ['grafana', 'favorite'];
+const alwaysMonoIcons = ['grafana', 'favorite', 'heart-break', 'heart'];
 
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   name: IconName;

packages/grafana-ui/src/components/Icon/assets/Heart.tsx

+import React, { FunctionComponent } from 'react';
+import { SvgProps } from './types';
+
+export const Heart: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size} {...rest}>
+      <path d="M12,20.8623a2.75115,2.75115,0,0,1-1.94922-.80468L3.83691,13.84277A6.27238,6.27238,0,0,1,12,4.36328a6.27239,6.27239,0,0,1,8.16309,9.47949l-6.21338,6.21387A2.75,2.75,0,0,1,12,20.8623Z" />
+    </svg>
+  );
+};

packages/grafana-ui/src/components/Icon/assets/HeartBreak.tsx

+import React, { FunctionComponent } from 'react';
+import { SvgProps } from './types';
+
+export const HeartBreak: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size} {...rest}>
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path d="M18.17,1.85h0A6.25,6.25,0,0,0,12.12.23L9.42,6.56l2.83.71a1,1,0,0,1,.67,1.41l-2,4a1,1,0,0,1-.9.56,1.13,1.13,0,0,1-.44-.1h0a1,1,0,0,1-.46-1.33l1.4-2.89-2.77-.7a1,1,0,0,1-.65-.53,1,1,0,0,1,0-.83L9.58,1a6.27,6.27,0,0,0-7.73,9.77L9.3,18.18a1,1,0,0,0,1.42,0h0l7.45-7.46A6.27,6.27,0,0,0,18.17,1.85Z" />
+        </g>
+      </g>
+    </svg>
+  );
+};

packages/grafana-ui/src/components/Icon/assets/index.ts

@@ -11,3 +11,5 @@ export * from './Import';
 export * from './PanelAdd';
 export * from './Circle';
 export * from './SquareShape';
+export * from './HeartBreak';
+export * from './Heart';