ui: fix Download icon rendering on DiagnosticsView component

Previously (with some regression changes), an icon on Statement
Diagnostics view wasn't rendered and instead base64 encoded string
was shown.

This fix introduces two kinds of changes:
- Reused Download icon from `ui-components` package so it is renders
properly
- styles for `Anchor` and `Button` components are extended with `fill`
attribute with the same values as for `color` attribute. It allows
nested SVG elements (icons) to inherit proper colors even when link or button
are hovered or disabled.

Release note (ui change): fixes corrupted icon rendering on Statement
Details page > Diagnostics tab

pkg/ui/src/components/anchor/anchor.module.styl

@@ -12,5 +12,7 @@
 
 .crl-anchor
   color $colors--link
+  fill $colors--link
   &:hover
     color $colors--info-4
+    fill $colors--info-4

pkg/ui/src/components/button/button.module.styl

@@ -19,9 +19,11 @@
   border solid 1px transparent
   background-color transparent
   color $colors--primary-blue-3
+  fill $colors--primary-blue-3
 
   &:hover
     color $colors--primary-blue-4
+    fill $colors--primary-blue-4
 
   &:active
     border solid 2px $colors--primary-blue-1
@@ -32,6 +34,7 @@
 
   &.crl-button--disabled
     color $colors--neutral-4
+    fill $colors--neutral-4
     pointer-events none
     cursor default
 
@@ -43,6 +46,7 @@
     line-height 22px
     letter-spacing 0.1px
     color $colors--neutral-7
+    fill $colors--neutral-7
     &:hover
       text-decoration underline
 

pkg/ui/src/views/statements/diagnostics/diagnosticsView.module.styl

@@ -44,7 +44,7 @@
 
   &__icon
     display inline-block
-    color inherit
+    fill inherit
     font-style normal
     line-height 0
     text-align center

pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx

@@ -33,10 +33,7 @@ import {
   selectDiagnosticsReportsCountByStatementFingerprint,
 } from "src/redux/statements/statementsSelectors";
 import { createStatementDiagnosticsReportAction } from "src/redux/statements";
-import { trustIcon } from "src/util/trust";
-
 import { DiagnosticStatusBadge } from "./diagnosticStatusBadge";
-import DownloadIcon from "!!url-loader!assets/download.svg";
 import EmptyListIcon from "!!url-loader!assets/emptyState/empty-list-results.svg";
 import styles from "./diagnosticsView.module.styl";
 import { cockroach } from "src/js/protos";
@@ -47,6 +44,7 @@ import { statementDiagnostics } from "src/util/docs";
 import { createStatementDiagnosticsAlertLocalSetting } from "src/redux/alerts";
 import { trackActivateDiagnostics, trackDownloadDiagnosticsBundle } from "src/util/analytics";
 import { EmptyTable } from "@cockroachlabs/admin-ui-components";
+import { Download } from "@cockroachlabs/icons";
 
 interface DiagnosticsViewOwnProps {
   statementFingerprint?: string;
@@ -98,22 +96,17 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
         if (record.completed) {
           return (
             <div className={cx("crl-statements-diagnostics-view__actions-column")}>
-              <a href={`_admin/v1/stmtbundle/${record.statement_diagnostics_id}`}
+              <Anchor href={`_admin/v1/stmtbundle/${record.statement_diagnostics_id}`}
                  onClick={() => trackDownloadDiagnosticsBundle(record.statement_fingerprint)}>
                 <Button
                   size="small"
                   type="flat"
                   iconPosition="left"
-                  icon={() => (
-                    <span
-                      className={cx("crl-statements-diagnostics-view__icon")}
-                      dangerouslySetInnerHTML={ trustIcon(DownloadIcon) }
-                    />
-                  )}
+                  icon={() => <Download className={cx("crl-statements-diagnostics-view__icon")} />}
                 >
                   Bundle (.zip)
                 </Button>
-              </a>
+              </Anchor>
             </div>
           );
         }