update mdi-react, modify last sync icon (#26617)

Updates `mdi-react` to latest version in order to fix #26016 - Last sync time icon has been changed to `weather-cloudy-clock` (fixes #26016) - before: ![image](https://user-images.githubusercontent.com/206864/138783780-43da183a-770d-4a3b-8cbc-b26b516dd88f.png) - after: ![image](https://user-images.githubusercontent.com/206864/138783790-66adc2f5-c851-4fa3-854c-7f808c51c7a4.png) - Some icons have been renamed in the new version of MDI: - `user` -> `account` - `users` -> `account-multiple` - `do-not-disturb` -> `minus-circle` - `error` -> `alert-circle` - The `amazon` icon has been [removed](https://github.com/Templarian/MaterialDesign/issues/5409) from the latest MDI. I've replaced with the `aws` icon which should be fine for the one scenario we use it in (adding a repo from AWS Code Commit). - before: ![image](https://user-images.githubusercontent.com/206864/138782276-22f51ed6-19c0-43b8-a91c-33b6bd7ac014.png) - after: ![image](https://user-images.githubusercontent.com/206864/138782317-8f5a0740-ac6a-4bf5-b5f0-b79fcf505816.png) - The `cancel` icon has been flipped in the latest MDI to match other icons with the same symbol and meaning (e.g. `account-cancel`) - before: ![image](https://user-images.githubusercontent.com/206864/138782743-95295273-89d3-41fb-8ece-b78e9335434a.png) - after: ![image](https://user-images.githubusercontent.com/206864/138782764-100fb24d-9755-41f0-b6dd-bc1bf170155e.png) - The `book-open-variant` icon that we use for API docs has been changed to have text in it. I have changed it to `book-open-blank-variant` so it remains blank.
2026-02-06 17:31:43 +00:00 · 2021-10-26 14:26:35 -07:00 · 2021-10-26 14:26:35 -07:00 · 6040bbcef2
commit 6040bbcef2
parent d0c56cd4ba
33 changed files with 75 additions and 85 deletions
--- a/client/shared/src/components/CodeExcerpt.tsx
+++ b/client/shared/src/components/CodeExcerpt.tsx
@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { range, isEqual } from 'lodash'
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import React from 'react'
 import VisibilitySensor from 'react-visibility-sensor'
 import { of, combineLatest, Observable, Subject, Subscription } from 'rxjs'
@ -139,7 +139,7 @@ export class CodeExcerpt extends React.PureComponent<Props, State> {
                    )}
                    {this.state.blobLinesOrError && isErrorLike(this.state.blobLinesOrError) && (
                        <div className="code-excerpt-alert">
-                            <ErrorIcon className="icon-inline mr-2" />
+                            <AlertCircleIcon className="icon-inline mr-2" />
                            {this.state.blobLinesOrError.message}
                        </div>
                    )}
--- a/client/shared/src/components/LastSyncedIcon.tsx
+++ b/client/shared/src/components/LastSyncedIcon.tsx
@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import format from 'date-fns/format'
-import CloudSyncOutlineIcon from 'mdi-react/CloudSyncOutlineIcon'
+import WeatherCloudyClockIcon from 'mdi-react/WeatherCloudyClockIcon'
 import React from 'react'

 import styles from './LastSyncedIcon.module.scss'
@ -14,7 +14,7 @@ export const LastSyncedIcon: React.FunctionComponent<Props> = props => {
    const formattedTime = format(Date.parse(props.lastSyncedTime), "yyyy-MM-dd'T'HH:mm:ss")

    return (
-        <CloudSyncOutlineIcon
+        <WeatherCloudyClockIcon
            className={classNames(props.className, styles.lastSyncedIcon, 'icon-inline', 'text-muted')}
            data-tooltip={`Last synced: ${formattedTime}`}
        />
--- a/client/web/src/components/ErrorBoundary.test.tsx
+++ b/client/web/src/components/ErrorBoundary.test.tsx
@ -8,7 +8,7 @@ import { HTTPStatusError } from '@sourcegraph/shared/src/backend/fetch'

 import { ErrorBoundary } from './ErrorBoundary'

-jest.mock('mdi-react/ErrorIcon', () => 'ErrorIcon')
+jest.mock('mdi-react/AlertCircleIcon', () => 'AlertCircleIcon')
 jest.mock('mdi-react/ReloadIcon', () => 'ReloadIcon')

 const ThrowError: React.FunctionComponent = () => {
--- a/client/web/src/components/ErrorBoundary.tsx
+++ b/client/web/src/components/ErrorBoundary.tsx
@ -1,6 +1,6 @@
 import * as sentry from '@sentry/browser'
 import * as H from 'history'
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import ReloadIcon from 'mdi-react/ReloadIcon'
 import React from 'react'

@ -98,7 +98,7 @@ export class ErrorBoundary extends React.PureComponent<Props, State> {

            return (
                <HeroPage
-                    icon={ErrorIcon}
+                    icon={AlertCircleIcon}
                    title="Error"
                    className={this.props.className}
                    subtitle={
--- a/client/web/src/components/ExecutionLogEntry.tsx
+++ b/client/web/src/components/ExecutionLogEntry.tsx
@ -1,6 +1,6 @@
 import classNames from 'classnames'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import React from 'react'

 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
@ -40,7 +40,7 @@ export const ExecutionLogEntry: React.FunctionComponent<ExecutionLogEntryProps>
                        {logEntry.exitCode === 0 ? (
                            <CheckCircleIcon className="text-success mr-1" />
                        ) : (
-                            <ErrorIcon className="text-danger mr-1" />
+                            <AlertCircleIcon className="text-danger mr-1" />
                        )}
                    </>
                )}
--- a/client/web/src/components/Timeline.story.tsx
+++ b/client/web/src/components/Timeline.story.tsx
@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react'
 import { parseISO } from 'date-fns'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckIcon from 'mdi-react/CheckIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import React from 'react'

 import { Timeline } from './Timeline'
@ -24,7 +24,7 @@ add('Basic', () => (
                        date: '2020-06-15T11:15:00+00:00',
                    },
                    {
-                        icon: <ErrorIcon />,
+                        icon: <AlertCircleIcon />,
                        className: 'bg-danger',
                        text: 'Second event description',
                        date: '2020-06-15T12:20:00+00:00',
@ -36,7 +36,7 @@ add('Basic', () => (
                        date: '2020-06-15T13:25:00+00:00',
                    },
                    {
-                        icon: <ErrorIcon />,
+                        icon: <AlertCircleIcon />,
                        className: 'bg-danger',
                        text: 'Fourth event description',
                        date: '2020-06-15T14:30:00+00:00',
@ -66,7 +66,7 @@ add('Details', () => (
                        date: '2020-06-15T11:15:00+00:00',
                    },
                    {
-                        icon: <ErrorIcon />,
+                        icon: <AlertCircleIcon />,
                        className: 'bg-danger',
                        text: 'Second event description',
                        date: '2020-06-15T12:20:00+00:00',
--- a/client/web/src/components/snapshots/ErrorBoundary.test.tsx.snap
+++ b/client/web/src/components/snapshots/ErrorBoundary.test.tsx.snap
@ -7,7 +7,7 @@ exports[`ErrorBoundary passes through if non-error 1`] = `
  <div
    className="icon"
  >
-    <ErrorIcon />
+    <AlertCircleIcon />
  </div>
  <div
    className="title"
@ -49,7 +49,7 @@ exports[`ErrorBoundary renders reload page if chunk error 1`] = `
  <div
    className="icon"
  >
-    <ErrorIcon />
+    <AlertCircleIcon />
  </div>
  <div
    className="title"
--- a/client/web/src/components/externalServices/ExternalServiceCard.tsx
+++ b/client/web/src/components/externalServices/ExternalServiceCard.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import * as H from 'history'
+import AccountIcon from 'mdi-react/AccountIcon'
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
-import UserIcon from 'mdi-react/UserIcon'
 import React from 'react'

 import { Link } from '@sourcegraph/shared/src/components/Link'
@ -51,7 +51,7 @@ export const ExternalServiceCard: React.FunctionComponent<ExternalServiceCardPro
                        <small>
                            {' '}
                            by
-                            <UserIcon className="icon-inline" />
+                            <AccountIcon className="icon-inline" />
                            <Link to={namespace.url}>{namespace.namespaceName}</Link>
                        </small>
                    )}
--- a/client/web/src/components/externalServices/ExternalServiceNode.tsx
+++ b/client/web/src/components/externalServices/ExternalServiceNode.tsx
@ -1,7 +1,7 @@
 import * as H from 'history'
+import AccountIcon from 'mdi-react/AccountIcon'
 import DeleteIcon from 'mdi-react/DeleteIcon'
 import SettingsIcon from 'mdi-react/SettingsIcon'
-import UserIcon from 'mdi-react/UserIcon'
 import React, { useCallback, useState } from 'react'

 import { Link } from '@sourcegraph/shared/src/components/Link'
@ -52,7 +52,7 @@ export const ExternalServiceNode: React.FunctionComponent<ExternalServiceNodePro
                <div>
                    {node.namespace && (
                        <>
-                            <UserIcon className="icon-inline" />
+                            <AccountIcon className="icon-inline" />
                            <Link to={node.namespace.url}>{node.namespace.namespaceName}</Link>{' '}
                        </>
                    )}
--- a/client/web/src/components/externalServices/externalServices.tsx
+++ b/client/web/src/components/externalServices/externalServices.tsx
@ -1,6 +1,6 @@
 import { Edit, FormattingOptions, JSONPath } from '@sqs/jsonc-parser'
 import { setProperty } from '@sqs/jsonc-parser/lib/edit'
-import AmazonIcon from 'mdi-react/AmazonIcon'
+import AwsIcon from 'mdi-react/AwsIcon'
 import BitbucketIcon from 'mdi-react/BitbucketIcon'
 import GithubIcon from 'mdi-react/GithubIcon'
 import GitIcon from 'mdi-react/GitIcon'
@ -531,7 +531,7 @@ const GITHUB_ENTERPRISE: AddExternalServiceOptions = {
 const AWS_CODE_COMMIT: AddExternalServiceOptions = {
    kind: ExternalServiceKind.AWSCODECOMMIT,
    title: 'AWS CodeCommit repositories',
-    icon: AmazonIcon,
+    icon: AwsIcon,
    jsonSchema: awsCodeCommitSchemaJSON,
    defaultDisplayName: 'AWS CodeCommit',
    defaultConfig: `{
--- a/client/web/src/enterprise/batches/detail/changesets/ChangesetLastSynced.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/ChangesetLastSynced.tsx
@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { formatDistance, isBefore, parseISO } from 'date-fns'
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import InfoCircleOutlineIcon from 'mdi-react/InfoCircleOutlineIcon'
 import SyncIcon from 'mdi-react/SyncIcon'
 import React, { useState, useEffect, useCallback } from 'react'
@ -78,13 +78,13 @@ export const ChangesetLastSynced: React.FunctionComponent<Props> = ({ changeset,
        <small className="text-muted">
            {changeset.__typename === 'ExternalChangeset' && changeset.syncerError ? (
                <span data-tooltip="Expand to see details.">
-                    <ErrorIcon className="icon-inline text-danger" /> Syncing from code host failed.
+                    <AlertCircleIcon className="icon-inline text-danger" /> Syncing from code host failed.
                </span>
            ) : (
                <>Last synced {formatDistance(parseISO(changeset.updatedAt), _now ?? new Date())} ago.</>
            )}{' '}
            {isErrorLike(lastUpdatedAt) && (
-                <ErrorIcon data-tooltip={lastUpdatedAt.message} className="ml-2 icon-inline small" />
+                <AlertCircleIcon data-tooltip={lastUpdatedAt.message} className="ml-2 icon-inline small" />
            )}
            <span data-tooltip={tooltipText}>
                <UpdateLoaderIcon
--- a/client/web/src/enterprise/batches/detail/changesets/ChangesetStatusCell.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/ChangesetStatusCell.tsx
@ -1,8 +1,8 @@
 import classNames from 'classnames'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import ArchiveIcon from 'mdi-react/ArchiveIcon'
 import AutorenewIcon from 'mdi-react/AutorenewIcon'
 import DeleteIcon from 'mdi-react/DeleteIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import SourceBranchIcon from 'mdi-react/SourceBranchIcon'
 import SourceMergeIcon from 'mdi-react/SourceMergeIcon'
 import SourcePullIcon from 'mdi-react/SourcePullIcon'
@ -114,7 +114,7 @@ export const ChangesetStatusError: React.FunctionComponent<ChangesetStatusIconPr
    className,
 }) => (
    <div className={classNames(iconClassNames, className)}>
-        <ErrorIcon className="text-danger" />
+        <AlertCircleIcon className="text-danger" />
        {label}
    </div>
 )
--- a/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx
+++ b/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx
@ -3,7 +3,6 @@ import { isArray, isEqual } from 'lodash'
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
 import CheckIcon from 'mdi-react/CheckIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import LinkVariantRemoveIcon from 'mdi-react/LinkVariantRemoveIcon'
 import ProgressClockIcon from 'mdi-react/ProgressClockIcon'
 import TimerSandIcon from 'mdi-react/TimerSandIcon'
@ -302,7 +301,7 @@ const WorkspaceStateIcon: React.FunctionComponent<{ node: Workspace }> = ({ node
        case BatchSpecWorkspaceState.CANCELED:
        case BatchSpecWorkspaceState.CANCELING:
        case BatchSpecWorkspaceState.FAILED:
-            return <ErrorIcon className="icon-inline text-danger" />
+            return <AlertCircleIcon className="icon-inline text-danger" />
        case BatchSpecWorkspaceState.COMPLETED:
            return <CheckCircleIcon className="icon-inline text-success" />
    }
@ -321,7 +320,7 @@ const StepStateIcon: React.FunctionComponent<{ step: Step }> = ({ step }) => {
    if (step.exitCode === 0) {
        return <CheckCircleIcon className="icon-inline text-success" />
    }
-    return <ErrorIcon className="icon-inline text-danger" />
+    return <AlertCircleIcon className="icon-inline text-danger" />
 }

 const StepTimer: React.FunctionComponent<{ step: Step }> = ({ step }) => {
@ -358,8 +357,8 @@ const ExecutionTimeline: React.FunctionComponent<ExecutionTimelineProps> = ({ no
            node.state === BatchSpecWorkspaceState.COMPLETED
                ? { icon: <CheckIcon />, text: 'Finished', date: node.finishedAt, className: 'bg-success' }
                : node.state === BatchSpecWorkspaceState.CANCELED
-                ? { icon: <ErrorIcon />, text: 'Canceled', date: node.finishedAt, className: 'bg-secondary' }
-                : { icon: <ErrorIcon />, text: 'Failed', date: node.finishedAt, className: 'bg-danger' },
+                ? { icon: <AlertCircleIcon />, text: 'Canceled', date: node.finishedAt, className: 'bg-secondary' }
+                : { icon: <AlertCircleIcon />, text: 'Failed', date: node.finishedAt, className: 'bg-danger' },
        ],
        [expandStage, node, now]
    )
@ -419,7 +418,7 @@ const genericStage = <E extends { startTime: string; exitCode: number | null }>(
    const success = isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0

    return {
-        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <ErrorIcon />,
+        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <AlertCircleIcon />,
        date: isArray(value) ? value[0].startTime : value.startTime,
        className: success || !finished ? 'bg-success' : 'bg-danger',
        expanded: expand || !(success || !finished),
--- a/client/web/src/enterprise/batches/settings/BatchSpecNode.tsx
+++ b/client/web/src/enterprise/batches/settings/BatchSpecNode.tsx
@ -1,11 +1,11 @@
 import classNames from 'classnames'
 import { parseISO } from 'date-fns'
 import { upperFirst } from 'lodash'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CancelIcon from 'mdi-react/CancelIcon'
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
 import ChevronDownIcon from 'mdi-react/ChevronDownIcon'
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import TimerSandIcon from 'mdi-react/TimerSandIcon'
 import React, { useCallback, useState } from 'react'

@ -91,7 +91,7 @@ const StateIcon: React.FunctionComponent<{ state: BatchSpecState }> = ({ state }

        case BatchSpecState.FAILED:
        default:
-            return <ErrorIcon className={classNames(styles.nodeStateIcon, 'icon-inline text-danger mb-1')} />
+            return <AlertCircleIcon className={classNames(styles.nodeStateIcon, 'icon-inline text-danger mb-1')} />
    }
 }

--- a/client/web/src/enterprise/codeintel/detail/CodeIntelIndexTimeline.tsx
+++ b/client/web/src/enterprise/codeintel/detail/CodeIntelIndexTimeline.tsx
@ -1,6 +1,6 @@
 import { isArray } from 'lodash'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckIcon from 'mdi-react/CheckIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import ProgressClockIcon from 'mdi-react/ProgressClockIcon'
 import TimerSandIcon from 'mdi-react/TimerSandIcon'
 import React, { FunctionComponent, useMemo } from 'react'
@ -34,7 +34,7 @@ export const CodeIntelIndexTimeline: FunctionComponent<CodeIntelIndexTimelinePro

            index.state === LSIFIndexState.COMPLETED
                ? { icon: <CheckIcon />, text: 'Finished', date: index.finishedAt, className: 'bg-success' }
-                : { icon: <ErrorIcon />, text: 'Failed', date: index.finishedAt, className: 'bg-danger' },
+                : { icon: <AlertCircleIcon />, text: 'Failed', date: index.finishedAt, className: 'bg-danger' },
        ],
        [index, now]
    )
@ -128,7 +128,7 @@ const genericStage = <E extends { startTime: string; exitCode: number | null }>(
    const success = isArray(value) ? value.every(logEntry => logEntry.exitCode === 0) : value.exitCode === 0

    return {
-        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <ErrorIcon />,
+        icon: !finished ? <ProgressClockIcon /> : success ? <CheckIcon /> : <AlertCircleIcon />,
        date: isArray(value) ? value[0].startTime : value.startTime,
        className: success || !finished ? 'bg-success' : 'bg-danger',
        expanded: !(success || !finished),
--- a/client/web/src/enterprise/codeintel/detail/CodeIntelUploadTimeline.tsx
+++ b/client/web/src/enterprise/codeintel/detail/CodeIntelUploadTimeline.tsx
@ -1,5 +1,5 @@
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckIcon from 'mdi-react/CheckIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import FileUploadIcon from 'mdi-react/FileUploadIcon'
 import ProgressClockIcon from 'mdi-react/ProgressClockIcon'
 import React, { FunctionComponent, useMemo } from 'react'
@ -94,7 +94,7 @@ const terminalStages = (upload: LsifUploadFields): TimelineStage[] =>
        : upload.state === LSIFUploadState.ERRORED
        ? [
              {
-                  icon: <ErrorIcon />,
+                  icon: <AlertCircleIcon />,
                  text: 'Failed',
                  date: upload.finishedAt,
                  className: 'bg-danger',
--- a/client/web/src/enterprise/codeintel/shared/CodeIntelStateIcon.tsx
+++ b/client/web/src/enterprise/codeintel/shared/CodeIntelStateIcon.tsx
@ -1,6 +1,6 @@
 import classNames from 'classnames'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import FileUploadIcon from 'mdi-react/FileUploadIcon'
 import TimerSandIcon from 'mdi-react/TimerSandIcon'
 import React, { FunctionComponent } from 'react'
@ -26,7 +26,7 @@ export const CodeIntelStateIcon: FunctionComponent<CodeIntelStateIconProps> = ({
    ) : state === LSIFUploadState.COMPLETED || state === LSIFIndexState.COMPLETED ? (
        <CheckCircleIcon className={classNames('text-success', className)} />
    ) : state === LSIFUploadState.ERRORED || state === LSIFIndexState.ERRORED ? (
-        <ErrorIcon className={classNames('text-danger', className)} />
+        <AlertCircleIcon className={classNames('text-danger', className)} />
    ) : (
        <></>
    )
--- a/client/web/src/enterprise/extensions/extension/RegistryExtensionNewReleasePage.tsx
+++ b/client/web/src/enterprise/extensions/extension/RegistryExtensionNewReleasePage.tsx
@ -1,6 +1,6 @@
 import * as H from 'history'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import React, { useCallback, useState } from 'react'
 import { of, Observable, concat, from } from 'rxjs'
 import { fromFetch } from 'rxjs/fetch'
@ -125,7 +125,7 @@ export const RegistryExtensionNewReleasePage = withAuthenticatedUser<Props>(

        return !extension.registryExtension || !extension.registryExtension.viewerCanAdminister ? (
            <HeroPage
-                icon={ErrorIcon}
+                icon={AlertCircleIcon}
                title="Unauthorized"
                subtitle="You are not authorized to adminster this extension."
            />
--- a/client/web/src/enterprise/extensions/registry/RegistryExtensionSourceBadge.tsx
+++ b/client/web/src/enterprise/extensions/registry/RegistryExtensionSourceBadge.tsx
@ -1,6 +1,4 @@
 import classNames from 'classnames'
-import DoNotDisturbIcon from 'mdi-react/DoNotDisturbIcon'
-import WebIcon from 'mdi-react/WebIcon'
 import * as React from 'react'

 import { LinkOrSpan } from '@sourcegraph/shared/src/components/LinkOrSpan'
@ -8,11 +6,10 @@ import * as GQL from '@sourcegraph/shared/src/graphql/schema'

 export const RegistryExtensionSourceBadge: React.FunctionComponent<{
    extension: Pick<GQL.IRegistryExtension, 'remoteURL' | 'registryName' | 'isLocal'>
-    showIcon?: boolean
    showText?: boolean
    showRegistryName?: boolean
    className?: string
-}> = ({ extension, showIcon, showText, showRegistryName, className = '' }) => (
+}> = ({ extension, showText, showRegistryName, className = '' }) => (
    <LinkOrSpan
        to={extension.remoteURL}
        target="_blank"
@ -24,12 +21,6 @@ export const RegistryExtensionSourceBadge: React.FunctionComponent<{
                : `Published on external extension registry ${extension.registryName}`
        }
    >
-        {showIcon &&
-            (extension.isLocal ? (
-                <DoNotDisturbIcon className="icon-inline mr-1" />
-            ) : (
-                <WebIcon className="icon-inline mr-1" />
-            ))}
        {showText && (extension.isLocal ? 'Local' : showRegistryName ? extension.registryName : 'External')}
    </LinkOrSpan>
 )
--- a/client/web/src/enterprise/site-admin/dotcom/customers/SiteAdminCustomerBillingLink.tsx
+++ b/client/web/src/enterprise/site-admin/dotcom/customers/SiteAdminCustomerBillingLink.tsx
@ -1,4 +1,4 @@
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import ExternalLinkIcon from 'mdi-react/ExternalLinkIcon'
 import React, { useCallback } from 'react'
 import { Observable } from 'rxjs'
@ -69,7 +69,7 @@ export const SiteAdminCustomerBillingLink: React.FunctionComponent<Props> = ({ c
                    </a>
                )}
                {isErrorLike(update) && (
-                    <ErrorIcon className="icon-inline text-danger mr-2" data-tooltip={update.message} />
+                    <AlertCircleIcon className="icon-inline text-danger mr-2" data-tooltip={update.message} />
                )}
                <button
                    type="button"
--- a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/SiteAdminProductSubscriptionBillingLink.tsx
+++ b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/SiteAdminProductSubscriptionBillingLink.tsx
@ -1,4 +1,4 @@
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import ExternalLinkIcon from 'mdi-react/ExternalLinkIcon'
 import React, { useCallback } from 'react'
 import { Observable } from 'rxjs'
@ -76,7 +76,7 @@ export const SiteAdminProductSubscriptionBillingLink: React.FunctionComponent<Pr
                    </a>
                )}
                {isErrorLike(update) && (
-                    <ErrorIcon className="icon-inline text-danger mr-2" data-tooltip={update.message} />
+                    <AlertCircleIcon className="icon-inline text-danger mr-2" data-tooltip={update.message} />
                )}
                <button
                    type="button"
--- a/client/web/src/enterprise/user/productSubscriptions/NewProductSubscriptionPaymentSection.tsx
+++ b/client/web/src/enterprise/user/productSubscriptions/NewProductSubscriptionPaymentSection.tsx
@ -1,7 +1,7 @@
 import { parseISO } from 'date-fns'
 import formatDistanceStrict from 'date-fns/formatDistanceStrict'
 import { isEqual } from 'lodash'
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import React, { useEffect, useMemo } from 'react'
 import { Observable, of } from 'rxjs'
 import { catchError, map, startWith } from 'rxjs/operators'
@ -108,7 +108,7 @@ export const NewProductSubscriptionPaymentSection: React.FunctionComponent<Props
                    <>&mdash;</>
                ) : isErrorLike(previewInvoice) ? (
                    <span className="text-danger">
-                        <ErrorIcon className="icon-inline" data-tooltip={previewInvoice.message} /> Error
+                        <AlertCircleIcon className="icon-inline" data-tooltip={previewInvoice.message} /> Error
                    </span>
                ) : previewInvoice.beforeInvoiceItem ? (
                    <>
--- a/client/web/src/repo/docs/DocumentationExamplesList.tsx
+++ b/client/web/src/repo/docs/DocumentationExamplesList.tsx
@ -1,5 +1,5 @@
 import * as H from 'history'
-import ErrorIcon from 'mdi-react/ErrorIcon'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import InformationIcon from 'mdi-react/InformationIcon'
 import React, { useMemo } from 'react'
 import { Observable } from 'rxjs'
@ -73,7 +73,7 @@ export const DocumentationExamplesList: React.FunctionComponent<Props> = ({
            )}
            {referencesLocations !== LOADING && isErrorLike(referencesLocations) && (
                <span className="ml-2">
-                    <ErrorIcon className="icon-inline" /> Error: {referencesLocations}
+                    <AlertCircleIcon className="icon-inline" /> Error: {referencesLocations}
                </span>
            )}
            {referencesLocations !== LOADING &&
--- a/client/web/src/repo/docs/DocumentationNode.tsx
+++ b/client/web/src/repo/docs/DocumentationNode.tsx
@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import * as H from 'history'
-import BookOpenVariantIcon from 'mdi-react/BookOpenVariantIcon'
+import BookOpenBlankVariantIcon from 'mdi-react/BookOpenBlankVariantIcon'
 import HelpCircleOutlineIcon from 'mdi-react/HelpCircleOutlineIcon'
 import LinkVariantIcon from 'mdi-react/LinkVariantIcon'
 import React, { RefObject, useEffect, useMemo, useRef } from 'react'
@ -155,8 +155,8 @@ export const DocumentationNode: React.FunctionComponent<Props> = React.memo(
                                            styles.pill
                                        )}
                                    >
-                                        <BookOpenVariantIcon className="icon-inline text-muted mr-1" /> Generated API
-                                        docs
+                                        <BookOpenBlankVariantIcon className="icon-inline text-muted mr-1" /> Generated
+                                        API docs
                                        <span className={classNames('mx-2', styles.pillDivider)} />
                                        <a
                                            // eslint-disable-next-line react/jsx-no-target-blank
--- a/client/web/src/repo/docs/DocumentationWelcomeAlert.tsx
+++ b/client/web/src/repo/docs/DocumentationWelcomeAlert.tsx
@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import BookOpenVariantIcon from 'mdi-react/BookOpenVariantIcon'
+import BookOpenBlankVariantIcon from 'mdi-react/BookOpenBlankVariantIcon'
 import React from 'react'

 import { DismissibleAlert } from '@sourcegraph/web/src/components/DismissibleAlert'
@ -14,7 +14,7 @@ export const DocumentationWelcomeAlert: React.FunctionComponent = () => (
        <div className="card">
            <div className="card-body p-3">
                <h1>
-                    <BookOpenVariantIcon className="icon-inline mr-2" />
+                    <BookOpenBlankVariantIcon className="icon-inline mr-2" />
                    API docs, for your code
                </h1>
                <ul className="mb-0 pl-3">
--- a/client/web/src/repo/docs/RepositoryDocumentationPage.tsx
+++ b/client/web/src/repo/docs/RepositoryDocumentationPage.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import * as H from 'history'
 import { upperFirst } from 'lodash'
-import BookOpenVariantIcon from 'mdi-react/BookOpenVariantIcon'
+import BookOpenBlankVariantIcon from 'mdi-react/BookOpenBlankVariantIcon'
 import MapSearchIcon from 'mdi-react/MapSearchIcon'
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'
 import { Link } from 'react-router-dom'
@ -211,7 +211,7 @@ export const RepositoryDocumentationPage: React.FunctionComponent<Props> = React
                            <FeedbackPrompt routes={routes} />
                        </div>
                        <h1>
-                            <BookOpenVariantIcon className="icon-inline mr-1" />
+                            <BookOpenBlankVariantIcon className="icon-inline mr-1" />
                            API docs
                            <Badge status="experimental" className="text-uppercase ml-2" useLink={true} />
                        </h1>
--- a/client/web/src/repo/settings/RepoSettingsArea.tsx
+++ b/client/web/src/repo/settings/RepoSettingsArea.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
-import DoNotDisturbIcon from 'mdi-react/DoNotDisturbIcon'
 import MapSearchIcon from 'mdi-react/MapSearchIcon'
+import MinusCircleIcon from 'mdi-react/MinusCircleIcon'
 import React, { useMemo } from 'react'
 import { Route, RouteComponentProps, Switch } from 'react-router'
 import { of } from 'rxjs'
@ -74,7 +74,7 @@ export const RepoSettingsArea: React.FunctionComponent<Props> = ({
    if (!repoOrError.viewerCanAdminister) {
        return (
            <HeroPage
-                icon={DoNotDisturbIcon}
+                icon={MinusCircleIcon}
                title="Forbidden"
                subtitle="You are not authorized to view or change this repository's settings."
            />
--- a/client/web/src/repo/tree/TreePage.tsx
+++ b/client/web/src/repo/tree/TreePage.tsx
@ -1,6 +1,7 @@
 import { subYears, formatISO } from 'date-fns'
 import * as H from 'history'
-import BookOpenVariantIcon from 'mdi-react/BookOpenVariantIcon'
+import AccountIcon from 'mdi-react/AccountIcon'
+import BookOpenBlankVariantIcon from 'mdi-react/BookOpenBlankVariantIcon'
 import BrainIcon from 'mdi-react/BrainIcon'
 import FolderIcon from 'mdi-react/FolderIcon'
 import HistoryIcon from 'mdi-react/HistoryIcon'
@ -9,7 +10,6 @@ import SourceBranchIcon from 'mdi-react/SourceBranchIcon'
 import SourceCommitIcon from 'mdi-react/SourceCommitIcon'
 import SourceRepositoryIcon from 'mdi-react/SourceRepositoryIcon'
 import TagIcon from 'mdi-react/TagIcon'
-import UserIcon from 'mdi-react/UserIcon'
 import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { Link, Redirect } from 'react-router-dom'
 import { Observable, EMPTY } from 'rxjs'
@ -355,7 +355,7 @@ export const TreePage: React.FunctionComponent<Props> = ({
                                                className="btn btn-outline-secondary"
                                                to={`${treeOrError.url}/-/docs`}
                                            >
-                                                <BookOpenVariantIcon className="icon-inline" /> API docs
+                                                <BookOpenBlankVariantIcon className="icon-inline" /> API docs
                                            </Link>
                                        )}
                                        <Link className="btn btn-outline-secondary" to={`${treeOrError.url}/-/commits`}>
@ -389,7 +389,7 @@ export const TreePage: React.FunctionComponent<Props> = ({
                                            className="btn btn-outline-secondary"
                                            to={`/${encodeURIPathComponent(repo.name)}/-/stats/contributors`}
                                        >
-                                            <UserIcon className="icon-inline" /> Contributors
+                                            <AccountIcon className="icon-inline" /> Contributors
                                        </Link>
                                        {codeIntelligenceEnabled && (
                                            <Link
--- a/client/web/src/site-admin/SiteAdminMigrationsPage.tsx
+++ b/client/web/src/site-admin/SiteAdminMigrationsPage.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames'
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
 import ArrowLeftBoldIcon from 'mdi-react/ArrowLeftBoldIcon'
 import ArrowRightBoldIcon from 'mdi-react/ArrowRightBoldIcon'
-import ErrorIcon from 'mdi-react/ErrorIcon'
 import WarningIcon from 'mdi-react/WarningIcon'
 import React, { useCallback, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router'
@ -204,7 +204,7 @@ interface MigrationInvalidBannerProps {
 const MigrationInvalidBanner: React.FunctionComponent<MigrationInvalidBannerProps> = ({ migrations }) => (
    <div className="alert alert-danger">
        <p>
-            <ErrorIcon className="icon-inline mr-2" />
+            <AlertCircleIcon className="icon-inline mr-2" />
            <strong>Contact support.</strong> The following migrations are not in the expected state. You have partially
            migrated or un-migrated data in a format that is incompatible with the currently deployed version of
            Sourcegraph.{' '}
--- a/client/web/src/site-admin/SiteAdminOrgsPage.tsx
+++ b/client/web/src/site-admin/SiteAdminOrgsPage.tsx
@ -1,8 +1,8 @@
 import * as H from 'history'
+import AccountIcon from 'mdi-react/AccountIcon'
 import AddIcon from 'mdi-react/AddIcon'
 import DeleteIcon from 'mdi-react/DeleteIcon'
 import SettingsIcon from 'mdi-react/SettingsIcon'
-import UserIcon from 'mdi-react/UserIcon'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { RouteComponentProps } from 'react-router'
 import { Link } from 'react-router-dom'
@ -77,7 +77,7 @@ const OrgNode: React.FunctionComponent<OrgNodeProps> = ({ node, history, onDidUp
                        className="btn btn-sm btn-secondary"
                        data-tooltip="Organization members"
                    >
-                        <UserIcon className="icon-inline" />{' '}
+                        <AccountIcon className="icon-inline" />{' '}
                        {node.members && (
                            <>
                                {node.members.totalCount} {pluralize('member', node.members.totalCount)}
--- a/client/web/src/site-admin/sidebaritems.ts
+++ b/client/web/src/site-admin/sidebaritems.ts
@ -1,9 +1,9 @@
+import AccountMultipleIcon from 'mdi-react/AccountMultipleIcon'
 import CogsIcon from 'mdi-react/CogsIcon'
 import ConsoleIcon from 'mdi-react/ConsoleIcon'
 import EarthIcon from 'mdi-react/EarthIcon'
 import MonitorStarIcon from 'mdi-react/MonitorStarIcon'
 import SourceRepositoryIcon from 'mdi-react/SourceRepositoryIcon'
-import UsersIcon from 'mdi-react/UsersIcon'

 import { SiteAdminSideBarGroup, SiteAdminSideBarGroups } from './SiteAdminSidebar'

@ -66,7 +66,7 @@ export const repositoriesGroup: SiteAdminSideBarGroup = {
 export const usersGroup: SiteAdminSideBarGroup = {
    header: {
        label: 'Users & auth',
-        icon: UsersIcon,
+        icon: AccountMultipleIcon,
    },
    items: [
        {
--- a/package.json
+++ b/package.json
@ -380,7 +380,7 @@
    "linguist-languages": "^7.14.0",
    "lodash": "^4.17.20",
    "marked": "^2.0.3",
-    "mdi-react": "^7.3.0",
+    "mdi-react": "^8.1.0",
    "minimatch": "^3.0.4",
    "monaco-editor": "^0.24.0",
    "monaco-yaml": "^3.2.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -16682,10 +16682,10 @@ mdast-util-to-string@^2.0.0:
  resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
  integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==

-mdi-react@^7.3.0:
-  version "7.3.0"
-  resolved "https://registry.npmjs.org/mdi-react/-/mdi-react-7.3.0.tgz#70a3d1ebe892e0b4cc18f413472d1b83b9158ba2"
-  integrity sha512-pG7nAhzUMHzlI/6jRMvyujMSpuM93gGcTIirpQBYq5zheNf6MkqR4BAMWcwWnK5759MRBqgTusbQm1YHnkJe9Q==
+mdi-react@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/mdi-react/-/mdi-react-8.1.0.tgz#faaa1d20e69b70c03e60588d989c6d58031263f3"
+  integrity sha512-MK/u2TbzyTW61DTzqPdewFjwt/joHndswlEpLRIHXhzbs7E//wncS1C4LVy/U6MLUVTjEc/9Vm70Y7qRFN0StA==

 mdn-browser-compat-data@1.0.15:
  version "1.0.15"