Use Tabler for missing LineAwesome icons

app/soapbox/features/crypto_donate/components/crypto_address.js

@@ -42,7 +42,7 @@ class CryptoAddress extends ImmutablePureComponent {
               <Icon id='qrcode' />
             </a>
             {explorerUrl && <a href={explorerUrl} target='_blank'>
-              <Icon id='external-link' />
+              <Icon id='external-link-alt' />
             </a>}
           </div>
         </div>

app/soapbox/features/crypto_donate/components/crypto_donate_panel.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'soapbox/components/icon';
 import SiteWallet from './site_wallet';
 import { List as ImmutableList } from 'immutable';
 import classNames from 'classnames';
@@ -44,7 +45,7 @@ class CryptoDonatePanel extends ImmutablePureComponent {
     return (
       <div className={classNames('wtf-panel funding-panel crypto-donate-panel', { 'crypto-donate-panel--has-more': hasMore })}>
         <div className='wtf-panel-header'>
-          <i role='img' alt='bitcoin' className='fa fa-bitcoin wtf-panel-header__icon' />
+          <Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} className='wtf-panel-header__icon' />
           <span className='wtf-panel-header__label'>
             <span><FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' /></span>
           </span>

app/soapbox/features/crypto_donate/components/detailed_crypto_address.js

@@ -32,7 +32,7 @@ export default class DetailedCryptoAddress extends ImmutablePureComponent {
           <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
           <div className='crypto-address__actions'>
             {explorerUrl && <a href={explorerUrl} target='_blank'>
-              <Icon id='external-link' />
+              <Icon id='external-link-alt' />
             </a>}
           </div>
         </div>

app/soapbox/features/ui/components/funding_panel.js

@@ -41,7 +41,7 @@ class FundingPanel extends ImmutablePureComponent {
     return (
       <div className='wtf-panel funding-panel'>
         <div className='wtf-panel-header'>
-          <i role='img' alt='users' className='fa fa-line-chart wtf-panel-header__icon' />
+          <i role='img' alt='users' className='fa fa-chart-line wtf-panel-header__icon' />
           <span className='wtf-panel-header__label'>
             <span>Funding Goal</span>
           </span>

app/soapbox/features/ui/components/subscription_button.js

@@ -59,7 +59,7 @@ class SubscriptionButton extends ImmutablePureComponent {
           title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })}
           onClick={this.handleSubscriptionToggle}
         >
-          <Icon id={subscribing ? 'bell-ringing' : 'bell'} />
+          <Icon src={subscribing ? require('@tabler/icons/icons/bell-ringing.svg') : require('@tabler/icons/icons/bell.svg')} />
           {subscribing && intl.formatMessage(messages.subscribed)}
         </Button>
       );

app/styles/components/account-header.scss

@@ -24,8 +24,9 @@
     .subscription-button {
       color: var(--primary-text-color);
       margin-bottom: 4px;
-      display: block;
-      vertical-align: top;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       background-color: var(--background-color);
       text-transform: uppercase;
       font-size: 13px;
@@ -43,6 +44,11 @@
       &:not(.button-active) i.fa {
         margin: 0;
       }
+
+      .svg-icon {
+        width: 20px;
+        height: 20px;
+      }
     }
   }
 

app/styles/components/crypto-donate.scss

@@ -37,6 +37,10 @@
       color: var(--primary-text-color--faint);
       margin-left: 10px;
     }
+
+    i.fa {
+      font-size: 20px;
+    }
   }
 
   &__note {

app/styles/components/wtf-panel.scss

@@ -18,13 +18,18 @@
 
   .wtf-panel-header {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     margin-bottom: 10px;
     padding: 15px 15px 0;
 
     &__icon {
       margin-right: 10px;
       font-size: 20px;
+
+      &.svg-icon {
+        width: 20px;
+        height: 20px;
+      }
     }
 
     &__label {