Allow setting a custom verified icon

app/soapbox/actions/soapbox.js

@@ -52,6 +52,7 @@ export const makeDefaultConfig = features => {
       homeFooter: ImmutableList(),
     }),
     allowedEmoji: features.emojiReactsRGI ? allowedEmojiRGI : allowedEmoji,
+    verifiedIcon: '',
     verifiedCanEditName: false,
     displayFqn: Boolean(features.federating),
     cryptoAddresses: ImmutableList(),

app/soapbox/components/verification_badge.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { useSelector } from 'react-redux';
 
-import Icon from 'soapbox/components/icon';
+import SvgIcon from 'soapbox/components/svg_icon';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
@@ -10,9 +11,16 @@ const messages = defineMessages({
 const VerificationBadge = () => {
   const intl = useIntl();
 
+  // Prefer a custom icon if found
+  const customIcon = useSelector(state => state.getIn(['soapbox', 'verifiedIcon']));
+  const icon = customIcon || require('icons/verified.svg');
+
+  // Render component based on file extension
+  const Icon = icon.endsWith('.svg') ? SvgIcon : 'img';
+
   return (
     <span className='verified-icon'>
-      <Icon src={require('icons/verified.svg')} alt={intl.formatMessage(messages.verified)} />
+      <Icon src={icon} alt={intl.formatMessage(messages.verified)} />
     </span>
   );
 };

app/styles/components/dropdown-menu.scss

@@ -84,7 +84,7 @@
         }
       }
 
-      .svg-icon:first-child {
+      > .svg-icon:first-child {
         height: 20px;
         width: 20px;
         min-width: 20px;

app/styles/ui.scss

@@ -730,12 +730,12 @@ article:last-child > .domain {
 }
 
 .verified-icon {
-  display: inline-block;
+  display: inline-flex;
   margin: 0 4px 0 1px;
   vertical-align: top;
   position: relative;
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
 
   .svg-icon svg > .bg {