From 01271da3898d2fdbcdf803593149f2afaf081ee8 Mon Sep 17 00:00:00 2001
From: Bhanu Teja P <bhanuteja.p@swiggy.in>
Date: Thu, 19 Sep 2019 16:27:10 +0530
Subject: [PATCH] Add relevant icons to top-level buttons (#1618)

* Add relevant icons to top-level buttons

* Add some missing icons

* Add some missing icons

* Add missing icons
---
 packages/app-123code/src/Transfer.tsx                  |  1 +
 packages/app-accounts/src/Overview.tsx                 |  4 ++++
 packages/app-accounts/src/Vanity/index.tsx             |  5 +++++
 packages/app-accounts/src/modals/Backup.tsx            |  2 ++
 packages/app-accounts/src/modals/ChangePass.tsx        |  2 ++
 packages/app-accounts/src/modals/Create.tsx            |  4 ++++
 packages/app-accounts/src/modals/Import.tsx            |  2 ++
 packages/app-accounts/src/modals/Qr.tsx                |  2 ++
 packages/app-accounts/src/modals/Transfer.tsx          |  2 ++
 packages/app-address-book/src/Overview.tsx             |  1 +
 packages/app-address-book/src/modals/Create.tsx        |  2 ++
 packages/app-claims/src/index.tsx                      |  2 ++
 packages/app-contracts/src/Codes/Add.tsx               |  1 +
 packages/app-contracts/src/Codes/Upload.tsx            |  1 +
 packages/app-contracts/src/Contracts/Add.tsx           |  1 +
 packages/app-contracts/src/Contracts/Call.tsx          |  2 ++
 packages/app-contracts/src/Deploy.tsx                  |  1 +
 packages/app-contracts/src/Modal.tsx                   |  1 +
 packages/app-contracts/src/RemoveABI.tsx               |  2 ++
 packages/app-democracy/src/Overview/Seconding.tsx      |  3 +++
 packages/app-democracy/src/Overview/Voting.tsx         |  3 +++
 packages/app-democracy/src/Propose.tsx                 |  1 +
 packages/app-extrinsics/src/Selection.tsx              |  2 ++
 packages/app-generic-asset/src/Assets.tsx              |  1 +
 packages/app-generic-asset/src/Transfer.tsx            |  1 +
 packages/app-generic-asset/src/modals/Create.tsx       |  2 ++
 packages/app-settings/src/Developer.tsx                |  2 ++
 packages/app-settings/src/General.tsx                  |  1 +
 packages/app-staking/src/Actions/Account/BondExtra.tsx |  2 ++
 packages/app-staking/src/Actions/Account/Nominate.tsx  |  2 ++
 .../src/Actions/Account/SetControllerAccount.tsx       |  2 ++
 .../src/Actions/Account/SetRewardDestination.tsx       |  2 ++
 .../src/Actions/Account/SetSessionAccount.tsx          |  2 ++
 packages/app-staking/src/Actions/Account/Unbond.tsx    |  2 ++
 packages/app-staking/src/Actions/Account/Validate.tsx  |  2 ++
 packages/app-staking/src/Actions/Account/index.tsx     |  4 ++++
 packages/app-staking/src/Actions/NewStake.tsx          |  2 ++
 packages/app-sudo/src/SetKey.tsx                       |  1 +
 packages/app-sudo/src/Sudo.tsx                         |  1 +
 packages/app-toolbox/src/Rpc/Selection.tsx             |  2 ++
 packages/app-toolbox/src/Sign.tsx                      |  1 +
 packages/app-toolbox/src/Unlock.tsx                    |  2 ++
 packages/app-treasury/src/Settings.tsx                 |  2 ++
 packages/react-components/src/Forget.tsx               |  2 ++
 packages/react-components/src/Messages.tsx             |  1 +
 packages/react-components/src/TxModal.tsx              |  2 ++
 packages/react-params/src/Param/Vector.tsx             |  2 ++
 packages/react-signer/src/Modal.tsx                    | 10 ++++++++++
 48 files changed, 100 insertions(+)

diff --git a/packages/app-123code/src/Transfer.tsx b/packages/app-123code/src/Transfer.tsx
index e659d562e7..e945d3a30c 100644
--- a/packages/app-123code/src/Transfer.tsx
+++ b/packages/app-123code/src/Transfer.tsx
@@ -43,6 +43,7 @@ export default class Transfer extends TxComponent<Props, State> {
               <TxButton
                 accountId={accountId}
                 label='make transfer'
+                labelIcon='send'
                 params={[recipientId, amount]}
                 tx='balances.transfer'
                 ref={this.button}
diff --git a/packages/app-accounts/src/Overview.tsx b/packages/app-accounts/src/Overview.tsx
index 618093d024..86a3d0aa9e 100644
--- a/packages/app-accounts/src/Overview.tsx
+++ b/packages/app-accounts/src/Overview.tsx
@@ -54,18 +54,21 @@ function Overview ({ accounts = [], onStatusChange, t }: Props): React.ReactElem
           <Button
             isPrimary
             label={t('Add account')}
+            labelIcon='add'
             onClick={_toggleCreate}
           />
           <Button.Or />
           <Button
             isPrimary
             label={t('Restore JSON')}
+            labelIcon='sync'
             onClick={_toggleImport}
           />
           <Button.Or />
           <Button
             isPrimary
             label={t('Add via Qr')}
+            labelIcon='qrcode'
             onClick={_toggleQr}
           />
           {isLedger() && (
@@ -74,6 +77,7 @@ function Overview ({ accounts = [], onStatusChange, t }: Props): React.ReactElem
               <Button
                 isPrimary
                 label={t('Query Ledger')}
+                labelIcon='question'
                 onClick={queryLedger}
               />
             </>
diff --git a/packages/app-accounts/src/Vanity/index.tsx b/packages/app-accounts/src/Vanity/index.tsx
index 95c369f3a4..a5b1c4c4f8 100644
--- a/packages/app-accounts/src/Vanity/index.tsx
+++ b/packages/app-accounts/src/Vanity/index.tsx
@@ -103,6 +103,11 @@ class VanityApp extends TxComponent<Props, State> {
               ? t('Stop generation')
               : t('Start generation')
           }
+          labelIcon={
+            isRunning
+              ? 'stop'
+              : 'sign-in'
+          }
           ref={this.button}
         />
       </Button.Group>
diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index 4040710543..86e0eb0472 100644
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@@ -54,6 +54,7 @@ class Backup extends TxComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -61,6 +62,7 @@ class Backup extends TxComponent<Props, State> {
             isDisabled={!isPassValid}
             isPrimary
             label={t('Download')}
+            labelIcon='download'
             onClick={this.doBackup}
             ref={this.button}
           />
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index a1e42a5208..6dd12d64b0 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -57,6 +57,7 @@ class ChangePass extends TxComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -64,6 +65,7 @@ class ChangePass extends TxComponent<Props, State> {
             isDisabled={!isNewValid || !isOldValid}
             isPrimary
             label={t('Change')}
+            labelIcon='sign-in'
             onClick={this.doChange}
             ref={this.button}
           />
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index 06acf580c3..babb159d13 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -135,6 +135,7 @@ class Create extends React.PureComponent<Props, State> {
         <Button.Group>
           <Button
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={this.onDiscard}
           />
           <Button.Or />
@@ -142,6 +143,7 @@ class Create extends React.PureComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             label={t('Save')}
+            labelIcon='save'
             onClick={this.onShowWarning}
           />
         </Button.Group>
@@ -266,12 +268,14 @@ class Create extends React.PureComponent<Props, State> {
             <Button
               isNegative
               label={t('Cancel')}
+              labelIcon='cancel'
               onClick={this.onHideWarning}
             />
             <Button.Or />
             <Button
               isPrimary
               label={t('Create and backup account')}
+              labelIcon='sign-in'
               onClick={this.onCommit}
             />
           </Button.Group>
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index f2169c6e74..6e021ef80b 100644
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@@ -49,6 +49,7 @@ class Import extends TxComponent<Props, State> {
           <Button.Group>
             <Button
               label={t('Cancel')}
+              labelIcon='cancel'
               onClick={onClose}
             />
             <Button.Or />
@@ -57,6 +58,7 @@ class Import extends TxComponent<Props, State> {
               isPrimary
               onClick={this.onSave}
               label={t('Restore')}
+              labelIcon='sync'
               ref={this.button}
             />
           </Button.Group>
diff --git a/packages/app-accounts/src/modals/Qr.tsx b/packages/app-accounts/src/modals/Qr.tsx
index e0d9a45923..c16e848088 100644
--- a/packages/app-accounts/src/modals/Qr.tsx
+++ b/packages/app-accounts/src/modals/Qr.tsx
@@ -87,6 +87,7 @@ function QrModal ({ className, onClose, onStatusChange, t }: Props): React.React
         <Button.Group>
           <Button
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -95,6 +96,7 @@ function QrModal ({ className, onClose, onStatusChange, t }: Props): React.React
             isPrimary
             onClick={_onSave}
             label={t('Create')}
+            labelIcon='sign-in'
           />
         </Button.Group>
       </Modal.Actions>
diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx
index 4ca06daa3e..c1c22edfbd 100644
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@@ -115,6 +115,7 @@ class Transfer extends React.PureComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -124,6 +125,7 @@ class Transfer extends React.PureComponent<Props, State> {
             isDisabled={!hasAvailable}
             isPrimary
             label={t('Make Transfer')}
+            labelIcon='send'
             onStart={onClose}
             withSpinner={false}
           />
diff --git a/packages/app-address-book/src/Overview.tsx b/packages/app-address-book/src/Overview.tsx
index cc516774f3..4639ff70ad 100644
--- a/packages/app-address-book/src/Overview.tsx
+++ b/packages/app-address-book/src/Overview.tsx
@@ -40,6 +40,7 @@ class Overview extends React.PureComponent<Props, State> {
             <Button
               isPrimary
               label={t('Add contact')}
+              labelIcon='add'
               onClick={this.toggleCreate}
             />
           </Button.Group>
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index 4adbd48b19..fd3e0f7378 100644
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@@ -61,6 +61,7 @@ class Create extends React.PureComponent<Props, State> {
             isNegative
             onClick={this.onDiscard}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
@@ -68,6 +69,7 @@ class Create extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.onCommit}
             label={t('Save')}
+            labelIcon='save'
           />
         </Button.Group>
       </Modal.Actions>
diff --git a/packages/app-claims/src/index.tsx b/packages/app-claims/src/index.tsx
index 85b9f60940..68a442d258 100644
--- a/packages/app-claims/src/index.tsx
+++ b/packages/app-claims/src/index.tsx
@@ -137,6 +137,7 @@ class App extends TxModal<Props, State> {
                     isPrimary
                     onClick={this.setStep(Step.Sign)}
                     label={t('Continue')}
+                    labelIcon='sign-in'
                   />
                 </Button.Group>
               )}
@@ -176,6 +177,7 @@ class App extends TxModal<Props, State> {
                       isPrimary
                       onClick={this.setStep(Step.Claim)}
                       label={t('Confirm claim')}
+                      labelIcon='sign-in'
                     />
                   </Button.Group>
                 )}
diff --git a/packages/app-contracts/src/Codes/Add.tsx b/packages/app-contracts/src/Codes/Add.tsx
index 19481c5de7..4756227d7c 100644
--- a/packages/app-contracts/src/Codes/Add.tsx
+++ b/packages/app-contracts/src/Codes/Add.tsx
@@ -68,6 +68,7 @@ class Add extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Save')}
+          labelIcon='save'
           onClick={this.onSave}
           ref={this.button}
         />
diff --git a/packages/app-contracts/src/Codes/Upload.tsx b/packages/app-contracts/src/Codes/Upload.tsx
index 63e2c40b7b..10b14af83e 100644
--- a/packages/app-contracts/src/Codes/Upload.tsx
+++ b/packages/app-contracts/src/Codes/Upload.tsx
@@ -76,6 +76,7 @@ class Upload extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Upload')}
+          labelIcon='upload'
           onClick={this.toggleBusy(true)}
           onSuccess={this.onSuccess}
           onFailed={this.toggleBusy(false)}
diff --git a/packages/app-contracts/src/Contracts/Add.tsx b/packages/app-contracts/src/Contracts/Add.tsx
index 4d7ebfa186..113ac9352e 100644
--- a/packages/app-contracts/src/Contracts/Add.tsx
+++ b/packages/app-contracts/src/Contracts/Add.tsx
@@ -81,6 +81,7 @@ class Add extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Save')}
+          labelIcon='save'
           onClick={this.onAdd}
           ref={this.button}
         />
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index 9c08167451..3455c6d9ce 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@@ -192,6 +192,7 @@ class Call extends TxComponent<Props, State> {
           isNegative
           onClick={this.onClose}
           label={t('Cancel')}
+          labelIcon='cancel'
         />
         <Button.Or />
         <TxButton
@@ -199,6 +200,7 @@ class Call extends TxComponent<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Call')}
+          labelIcon='sign-in'
           onClick={this.toggleBusy}
           onFailed={this.toggleBusy}
           onSuccess={this.toggleBusy}
diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx
index 2a3595547c..a504d5dad1 100644
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/packages/app-contracts/src/Deploy.tsx
@@ -205,6 +205,7 @@ class Deploy extends ContractModal<Props, State> {
           isDisabled={!isValid}
           isPrimary
           label={t('Deploy')}
+          labelIcon='cloud upload'
           onClick={this.toggleBusy(true)}
           onFailed={this.toggleBusy(false)}
           onSuccess={this.onSuccess}
diff --git a/packages/app-contracts/src/Modal.tsx b/packages/app-contracts/src/Modal.tsx
index 6efcf551dd..41d60572d7 100644
--- a/packages/app-contracts/src/Modal.tsx
+++ b/packages/app-contracts/src/Modal.tsx
@@ -172,6 +172,7 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
           isNegative
           onClick={this.onClose}
           label={t('Cancel')}
+          labelIcon='cancel'
         />
         <Button.Or />
       </>
diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx
index e737dfe0d0..78b3cb2747 100644
--- a/packages/app-contracts/src/RemoveABI.tsx
+++ b/packages/app-contracts/src/RemoveABI.tsx
@@ -46,12 +46,14 @@ function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<P
             isNegative
             onClick={onClose}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
             isPrimary
             onClick={_onRemove}
             label={t('Remove')}
+            labelIcon='trash'
           />
         </Button.Group>
       </Modal.Actions>
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index 5c88382538..0149bc4f66 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -45,6 +45,7 @@ class Seconding extends React.PureComponent<Props, State> {
           <Button
             isPrimary
             label={t('Second proposal')}
+            labelIcon='toggle off'
             onClick={this.toggleSeconding}
           />
         </div>
@@ -84,6 +85,7 @@ class Seconding extends React.PureComponent<Props, State> {
               isNegative
               onClick={this.toggleSeconding}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -91,6 +93,7 @@ class Seconding extends React.PureComponent<Props, State> {
               isDisabled={!accountId || isDepositor}
               isPrimary
               label={t('Second')}
+              labelIcon='sign-in'
               onClick={this.toggleSeconding}
               params={[proposalId]}
               tx='democracy.second'
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index 50e5a77e8d..b114630330 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -58,6 +58,7 @@ class Voting extends React.PureComponent<Props, State> {
           <Button
             isPrimary
             label={t('Vote')}
+            labelIcon='check'
             onClick={this.toggleVoting}
           />
         </div>
@@ -102,6 +103,7 @@ class Voting extends React.PureComponent<Props, State> {
               isNegative
               onClick={this.toggleVoting}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -109,6 +111,7 @@ class Voting extends React.PureComponent<Props, State> {
               isDisabled={!accountId}
               isPrimary
               label={t('Vote')}
+              labelIcon='check'
               onClick={this.toggleVoting}
               params={[referendumId, voteValue]}
               tx='democracy.vote'
diff --git a/packages/app-democracy/src/Propose.tsx b/packages/app-democracy/src/Propose.tsx
index 673d3638c8..41fedce6df 100644
--- a/packages/app-democracy/src/Propose.tsx
+++ b/packages/app-democracy/src/Propose.tsx
@@ -66,6 +66,7 @@ class Propose extends TxComponent<Props, State> {
           <TxButton
             accountId={accountId}
             label={t('Submit Proposal')}
+            labelIcon='sign-in'
             tx='democracy.propose'
             isDisabled={!isValid}
             params={[
diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx
index fadfadec00..b40a1ea336 100644
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@@ -79,6 +79,7 @@ class Selection extends TxComponent<Props, State> {
             isDisabled={!isValidUnsigned}
             isUnsigned
             label={t('Submit Unsigned')}
+            labelIcon='sign-in'
             extrinsic={extrinsic}
           />
           <Button.Or />
@@ -87,6 +88,7 @@ class Selection extends TxComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             label={t('Submit Transaction')}
+            labelIcon='sign-in'
             extrinsic={extrinsic}
             ref={this.button}
           />
diff --git a/packages/app-generic-asset/src/Assets.tsx b/packages/app-generic-asset/src/Assets.tsx
index b588cf1287..46977a1c4d 100644
--- a/packages/app-generic-asset/src/Assets.tsx
+++ b/packages/app-generic-asset/src/Assets.tsx
@@ -39,6 +39,7 @@ class Assets extends React.PureComponent<Props, State> {
             <Button
               isPrimary
               label={t('Register Asset')}
+              labelIcon='registered'
               onClick={this.toggleCreate}
             />
           </Button.Group>
diff --git a/packages/app-generic-asset/src/Transfer.tsx b/packages/app-generic-asset/src/Transfer.tsx
index e49ba6c7da..e79bfc4585 100644
--- a/packages/app-generic-asset/src/Transfer.tsx
+++ b/packages/app-generic-asset/src/Transfer.tsx
@@ -98,6 +98,7 @@ class Transfer extends React.PureComponent<Props> {
           isDisabled={!hasAvailable}
           isPrimary
           label={t('Make Transfer')}
+          labelIcon='send'
           onStart={onClose}
           withSpinner={false}
         />
diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx
index 6b9636c3e2..524724c100 100644
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@@ -57,6 +57,7 @@ class Create extends React.PureComponent<Props, State> {
             isNegative
             onClick={this.onDiscard}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
@@ -64,6 +65,7 @@ class Create extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.onCommit}
             label={t('Register')}
+            labelIcon='registered'
           />
         </Button.Group>
       </Modal.Actions>
diff --git a/packages/app-settings/src/Developer.tsx b/packages/app-settings/src/Developer.tsx
index 214e0d7bbd..08980788bb 100644
--- a/packages/app-settings/src/Developer.tsx
+++ b/packages/app-settings/src/Developer.tsx
@@ -78,6 +78,7 @@ class Developer extends React.PureComponent<Props, State> {
             isNegative
             onClick={this.clearTypes}
             label={t('Reset')}
+            labelIcon='sync'
           />
           <Button.Or />
           <Button
@@ -85,6 +86,7 @@ class Developer extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.saveDeveloper}
             label={t('Save')}
+            labelIcon='save'
           />
         </Button.Group>
       </div>
diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index 4ed7e5b741..449600286f 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -121,6 +121,7 @@ function General ({ className, t }: Props): React.ReactElement<Props> {
               ? t('Save & Reload')
               : t('Save')
           }
+          labelIcon='save'
         />
       </Button.Group>
     </div>
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index e692b188a3..2f1bba492c 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -76,6 +76,7 @@ class BondExtra extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -83,6 +84,7 @@ class BondExtra extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Bond more')}
+              labelIcon='sign-in'
               onClick={onClose}
               extrinsic={extrinsic}
               ref={this.button}
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index 86cc2e9421..75fb23929e 100644
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@@ -59,6 +59,7 @@ class Nominate extends React.PureComponent<Props, State> {
             isNegative
             onClick={onClose}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <TxButton
@@ -68,6 +69,7 @@ class Nominate extends React.PureComponent<Props, State> {
             onClick={onClose}
             params={[nominees]}
             label={t('Nominate')}
+            labelIcon='hand paper outline'
             tx='staking.nominate'
           />
         </Button.Group>
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index e1c06e4baa..e955e5609f 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -54,6 +54,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -61,6 +62,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Set controller')}
+              labelIcon='sign-in'
               onClick={onClose}
               params={[controllerId]}
               tx='staking.setController'
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 71085aa79f..0ab8a82d32 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -49,6 +49,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -56,6 +57,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Set reward destination')}
+              labelIcon='sign-in'
               onClick={onClose}
               params={[destination]}
               tx={'staking.setPayee'}
diff --git a/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx b/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx
index 0e035640ee..2244827b34 100644
--- a/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionAccount.tsx
@@ -66,6 +66,7 @@ class SetSessionKey extends React.PureComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -73,6 +74,7 @@ class SetSessionKey extends React.PureComponent<Props, State> {
               isDisabled={hasError}
               isPrimary
               label={t('Set Session Key')}
+              labelIcon='sign-in'
               onClick={onClose}
               params={
                 isSubstrateV2
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index efec76369e..6a77164738 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -73,6 +73,7 @@ class Unbond extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -80,6 +81,7 @@ class Unbond extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Unbond')}
+              labelIcon='sign-out'
               onClick={onClose}
               params={[maxUnbond]}
               tx='staking.unbond'
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index 7de3e9f73c..7fc0b53847 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -94,6 +94,7 @@ class Validate extends TxComponent<Props, State> {
           <Button
             isNegative
             label={t('Cancel')}
+            labelIcon='cancel'
             onClick={onClose}
           />
           <Button.Or />
@@ -102,6 +103,7 @@ class Validate extends TxComponent<Props, State> {
             isDisabled={!!unstakeThresholdError}
             isPrimary
             label={t('Validate')}
+            labelIcon='check circle outline'
             onClick={onClose}
             params={[
               isSubstrateV2
diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx
index e4c732e801..6abfb8dc65 100644
--- a/packages/app-staking/src/Actions/Account/index.tsx
+++ b/packages/app-staking/src/Actions/Account/index.tsx
@@ -365,6 +365,7 @@ class Account extends React.PureComponent<Props, State> {
               ? t('Stop Nominating')
               : t('Stop Validating')
           }
+          labelIcon='stop'
           key='stop'
           tx='staking.chill'
         />
@@ -377,6 +378,7 @@ class Account extends React.PureComponent<Props, State> {
             key='set'
             onClick={this.toggleSetSessionAccount}
             label={t('Set Session Key')}
+            labelIcon='sign-in'
           />
         );
       } else {
@@ -386,6 +388,7 @@ class Account extends React.PureComponent<Props, State> {
             key='validate'
             onClick={this.toggleValidate}
             label={t('Validate')}
+            labelIcon='check circle outline'
           />
         );
       }
@@ -397,6 +400,7 @@ class Account extends React.PureComponent<Props, State> {
           key='nominate'
           onClick={this.toggleNominate}
           label={t('Nominate')}
+          labelIcon='hand paper outline'
         />
       );
     }
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index f31ce4b02b..b3bbeb2ed1 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -66,6 +66,7 @@ class NewStake extends TxComponent<Props, State> {
               isNegative
               onClick={onClose}
               label={t('Cancel')}
+              labelIcon='cancel'
             />
             <Button.Or />
             <TxButton
@@ -73,6 +74,7 @@ class NewStake extends TxComponent<Props, State> {
               isDisabled={!canSubmit}
               isPrimary
               label={t('Bond')}
+              labelIcon='sign-in'
               onClick={onClose}
               extrinsic={extrinsic}
               ref={this.button}
diff --git a/packages/app-sudo/src/SetKey.tsx b/packages/app-sudo/src/SetKey.tsx
index aede754ac2..f3eccbf5c4 100644
--- a/packages/app-sudo/src/SetKey.tsx
+++ b/packages/app-sudo/src/SetKey.tsx
@@ -65,6 +65,7 @@ class SetKey extends React.PureComponent<Props, State> {
                   isDisabled={!isMine || sudoKey === selected}
                   isPrimary
                   label={t('Reassign')}
+                  labelIcon='sign-in'
                   params={[selected]}
                   tx='sudo.setKey'
                 />
diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx
index 4c47cca7e3..e9da2f46bf 100644
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@@ -47,6 +47,7 @@ class Propose extends TxComponent<Props, State> {
             <TxButton
               accountId={sudoKey}
               label={t('Submit Sudo')}
+              labelIcon='sign-in'
               tx='sudo.sudo'
               isDisabled={!method || !isValid}
               params={method ? [createType('Proposal', method)] : []}
diff --git a/packages/app-toolbox/src/Rpc/Selection.tsx b/packages/app-toolbox/src/Rpc/Selection.tsx
index d17eb41236..8f98d33007 100644
--- a/packages/app-toolbox/src/Rpc/Selection.tsx
+++ b/packages/app-toolbox/src/Rpc/Selection.tsx
@@ -64,7 +64,9 @@ class Selection extends TxComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             onClick={this.onSubmit}
+
             label={t('Submit RPC call')}
+            labelIcon='sign-in'
             ref={this.button}
           />
         </Button.Group>
diff --git a/packages/app-toolbox/src/Sign.tsx b/packages/app-toolbox/src/Sign.tsx
index 87edf69efb..934dfa33e9 100644
--- a/packages/app-toolbox/src/Sign.tsx
+++ b/packages/app-toolbox/src/Sign.tsx
@@ -102,6 +102,7 @@ class Sign extends React.PureComponent<Props, State> {
               isPrimary
               onClick={this.toggleUnlock}
               label={t('Unlock account')}
+              labelIcon='unlock'
             />
           </Button.Group>
         </div>
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 2bc9bdba50..c2a3a54cf5 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -66,12 +66,14 @@ class Unlock extends TxComponent<Props, State> {
             isNegative
             onClick={this.onCancel}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
             isPrimary
             onClick={this.onUnlock}
             label={t('Unlock')}
+            labelIcon='unlock'
             ref={this.button}
           />
         </Button.Group>
diff --git a/packages/app-treasury/src/Settings.tsx b/packages/app-treasury/src/Settings.tsx
index 75057ca6f6..302aeff829 100644
--- a/packages/app-treasury/src/Settings.tsx
+++ b/packages/app-treasury/src/Settings.tsx
@@ -117,6 +117,7 @@ class Settings extends TxComponent<Props, State> {
               <TxButton
                 accountId={accountId}
                 label={t('Submit')}
+                labelIcon='sign-in'
                 tx='treasury.configure'
                 params={[
                   proposalBond.toString(),
@@ -144,6 +145,7 @@ class Settings extends TxComponent<Props, State> {
               <TxButton
                 accountId={accountId}
                 label={t('Submit')}
+                labelIcon='sign-in'
                 tx='treasury.setPot'
                 params={[pot]}
               />
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index d79f2d9bf1..6f8ef335f0 100644
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@@ -114,12 +114,14 @@ function Forget (props: Props): React.ReactElement<Props> {
             isNegative
             onClick={onClose}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           <Button.Or />
           <Button
             isPrimary
             onClick={onForget}
             label={t('Forget')}
+            labelIcon='trash'
           />
         </Button.Group>
       </Modal.Actions>
diff --git a/packages/react-components/src/Messages.tsx b/packages/react-components/src/Messages.tsx
index 39cf3f392d..8dcfd80f2a 100644
--- a/packages/react-components/src/Messages.tsx
+++ b/packages/react-components/src/Messages.tsx
@@ -52,6 +52,7 @@ function renderMessage (props: Props, index: number): React.ReactNode {
       isDisabled={!onSelectProp}
       onClick={onSelect(props, index)}
       isPrimary={!!onSelectProp}
+      labelIcon='info'
     >
       {name}
       (
diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx
index 2875ecc89f..ec0e614f86 100644
--- a/packages/react-components/src/TxModal.tsx
+++ b/packages/react-components/src/TxModal.tsx
@@ -157,6 +157,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
         isDisabled={this.isDisabled()}
         isPrimary
         label={this.submitLabel()}
+        labelIcon='sign-in'
         onClick={this.onSubmit}
         onFailed={this.onFailed}
         onSuccess={this.onSuccess}
@@ -176,6 +177,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
           isNegative
           onClick={this.hideModal}
           label={t('Cancel')}
+          labelIcon='cancel'
         />
         <Button.Or />
       </>
diff --git a/packages/react-params/src/Param/Vector.tsx b/packages/react-params/src/Param/Vector.tsx
index 1c824296ef..91ad06ecb7 100644
--- a/packages/react-params/src/Param/Vector.tsx
+++ b/packages/react-params/src/Param/Vector.tsx
@@ -102,12 +102,14 @@ class Vector extends React.PureComponent<Props, State> {
           isPrimary
           onClick={this.rowAdd}
           label={t('Add item')}
+          labelIcon='add'
         />
         <Button
           isDisabled={values.length === 1}
           isNegative
           onClick={this.rowRemove}
           label={t('Remove item')}
+          labelIcon='minus'
         />
       </div>
     );
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index 73e07607e8..77e0cc39e5 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -156,6 +156,7 @@ class Signer extends React.PureComponent<Props, State> {
             }
             tabIndex={3}
             label={t('Cancel')}
+            labelIcon='cancel'
           />
           {(!isQrVisible || !isQrScanning) && (
             <>
@@ -181,6 +182,15 @@ class Signer extends React.PureComponent<Props, State> {
                           ? t('Sign via Qr')
                           : t('Sign and Submit')
                 }
+                labelIcon={
+                  isQrVisible
+                    ? 'qrcode'
+                    : currentItem.isUnsigned
+                      ? 'sign-in'
+                      : isExternal
+                        ? 'qrcode'
+                        : 'sign-in'
+                }
               />
             </>
           )}