File view new icons (#6448)

* ['file view'] use new icons(svg icons) * ['file view'] use new icons for 'markdown file view' page * ['file view'] for 'markdown & other text files': highlight the 'Save' button when it can be saved
2025-09-12 04:10:47 +00:00 · 2024-08-01 11:31:43 +08:00
parent 848eca804b
commit 8aac3a27c8
17 changed files with 219 additions and 42 deletions
--- a/frontend/src/assets/icons/client.svg
+++ b/frontend/src/assets/icons/client.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>clients</title>
+<g id="clients">
+	<path id="形状结合" class="st0" d="M30,2c0.6,0,1,0.4,1,1v20c0,0.6-0.4,1-1,1H18l0,0.9c0,1.1,2.9,2.2,4.1,2.2h1.4V30h-15v-2.8
+		h1.4c1.1,0,4.1-1.1,4.1-2.2l0-0.9H2c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1H30z M28,5H4v16h24V5z"/>
+</g>
+</svg>
--- a/frontend/src/assets/icons/download.svg
+++ b/frontend/src/assets/icons/download.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M5,22v5h22v-5h3v6c0,1.1-0.8,1.9-1.8,2H4c-1.1,0-2-0.9-2-2v-6H5z M17.5,2v17.3l4.9-4.7l2.5,2.4l-8.7,8.4L7.5,17
+	l2.5-2.4l4.5,4.3V2H17.5z"/>
+</svg>
--- a/frontend/src/assets/icons/info.svg
+++ b/frontend/src/assets/icons/info.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M16,0c8.8,0,16,7.2,16,16s-7.2,16-16,16S0,24.8,0,16S7.2,0,16,0z M16,3C8.8,3,3,8.8,3,16s5.8,13,13,13
+	s13-5.8,13-13c0-3.4-1.4-6.8-3.8-9.2S19.4,3,16,3z M17,14c0.6,0,1,0.4,1,1v8c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1v-8
+	c0-0.6,0.4-1,1-1H17z"/>
+<circle class="st0" cx="16" cy="9.4" r="2"/>
+</svg>
--- a/frontend/src/assets/icons/lock.svg
+++ b/frontend/src/assets/icons/lock.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>lock</title>
+<g id="lock">
+	<path id="形状结合" class="st0" d="M16,0c4.6,0,8,4,8,9v3h1.3c2,0,3.7,1.8,3.7,4v12c0,2.2-1.7,4-3.7,4H6.7c-2,0-3.7-1.8-3.7-4
+		V16c0-2.2,1.7-4,3.7-4H8V9C8,4,11.4,0,16,0z M25,15H7c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h18c0.6,0,1-0.4,1-1V16
+		C26,15.4,25.6,15,25,15z M16,3c-2.8,0-5,2.5-5,5.6V12h10V8.6C21,5.5,18.8,3,16,3z"/>
+</g>
+</svg>
--- a/frontend/src/assets/icons/open-folder.svg
+++ b/frontend/src/assets/icons/open-folder.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>folder-open</title>
+<g id="folder-open">
+	<path id="形状" class="st0" d="M29.3,13H27V9.5c0-1.7-1.3-3-3-3h-8.8l0,0L11.6,2H2.7C1.2,2,0,3.5,0,5.2v21.5
+		C0,28.5,1.2,30,2.7,30h22.2c0.9,0,1.8-0.6,2.3-1.5l4.4-10.7C32.7,15.6,31.4,13,29.3,13z M3.5,5h6.8l0,0l3.5,4.5h9.8
+		c0.3,0,0.5,0.2,0.5,0.5v3l0,0H8.5c-0.9,0-1.8,0.6-2.3,1.6L3,22.2V5.5C3,5.2,3.2,5,3.5,5z M24.2,27H5.2c-0.3,0-0.5-0.2-0.5-0.5
+		c0-0.1,0-0.1,0-0.2l3.9-10C8.7,16.1,8.9,16,9.1,16h19.4c0.3,0,0.5,0.2,0.5,0.5c0,0.1,0,0.1,0,0.2l-4.3,10
+		C24.6,26.9,24.4,27,24.2,27z"/>
+</g>
+</svg>
--- a/frontend/src/assets/icons/print.svg
+++ b/frontend/src/assets/icons/print.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>print</title>
+<g id="print">
+	<path id="形状结合" class="st0" d="M25,1c0.6,0,1,0.4,1,1l0,6h3c1.1,0,2,0.9,2,2v13c0,0.6-0.4,1-1,1h-4v6c0,0.6-0.4,1-1,1H7
+		c-0.6,0-1-0.4-1-1v-6H2c-0.6,0-1-0.4-1-1V10c0-1.1,0.9-2,2-2h3l0-6c0-0.5,0.4-0.9,0.9-1L7,1H25z M23,21H9v7h14V21z M27,11H5
+		c-0.6,0-1,0.4-1,1v8.5C4,20.8,4.2,21,4.5,21H6v-2c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1v2h1.5c0.3,0,0.5-0.2,0.5-0.5V12
+		C28,11.4,27.6,11,27,11z M24.5,13c0.8,0,1.5,0.7,1.5,1.5S25.3,16,24.5,16S23,15.3,23,14.5S23.7,13,24.5,13z M23,4H9l0,4h14L23,4z"
+		/>
+</g>
+</svg>
--- a/frontend/src/assets/icons/save.svg
+++ b/frontend/src/assets/icons/save.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>save</title>
+<g id="save">
+	<path id="形状结合" class="st0" d="M22,1c1.4,0,2.4,0.3,3,1c0.9,1,4,4.8,5,6c0.7,0.8,1,1.8,1,3v17c0,1.7-1.3,3-3,3H4
+		c-1.7,0-3-1.3-3-3V4c0-1.7,1.3-3,3-3H22z M6,4H5C4.4,4,4,4.4,4,5v22c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V10.5l-5-5.9V11
+		c0,0.6-0.4,1-1,1H7c-0.6,0-1-0.4-1-1V4z M16,15c2.8,0,5,2.2,5,5s-2.2,5-5,5s-5-2.2-5-5S13.2,15,16,15z M16,18c-1.1,0-2,0.9-2,2
+		s0.9,2,2,2s2-0.9,2-2S17.1,18,16,18z M20,4H9v5h11V4z"/>
+</g>
+</svg>
--- a/frontend/src/assets/icons/share.svg
+++ b/frontend/src/assets/icons/share.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M25,2c-2.2,0-4,1.7-4,4s1.8,4,4,4s4-1.7,4-4S27.2,2,25,2z M7,12c-2.2,0-4,1.7-4,4s1.8,4,4,4s4-1.7,4-4
+	S9.2,12,7,12z M25,22c-2.2,0-4,1.7-4,4s1.8,4,4,4s4-1.7,4-4S27.1,22,25,22z M11.7,12.4l6.8-4.2l1.5,2.6L13.2,15L11.7,12.4z
+	 M13.6,17.7l6.9,4.1L19,24.3l-6.9-4.1C12.1,20.2,13.6,17.7,13.6,17.7z"/>
+</svg>
--- a/frontend/src/assets/icons/spinner.svg
+++ b/frontend/src/assets/icons/spinner.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M13,29c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3S13,27.3,13,29z M13,3c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3
+	S13,1.3,13,3z M29,13c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S30.7,13,29,13z M0,16c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3S0,14.3,0,16
+	z M23.1,4.7c-0.8,0.8-1.1,1.9-0.8,2.9c0.3,1,1.1,1.8,2.1,2.1s2.1,0,2.9-0.8c1.2-1.2,1.2-3.1,0-4.2S24.2,3.5,23.1,4.7z M23.1,23.1
+	C22.3,23.8,22,25,22.3,26c0.3,1.1,1.1,1.9,2.2,2.2c1.1,0.3,2.2-0.1,2.9-0.9c1.2-1.2,1.2-3.1,0-4.2C26.1,21.9,24.2,21.9,23.1,23.1z
+	 M8.9,4.7C8.2,3.9,7.1,3.6,6,3.9C5,4.2,4.2,5,3.9,6s0,2.1,0.8,2.9C5.4,9.7,6.6,10,7.6,9.7s1.8-1.1,2.1-2.1S9.7,5.4,8.9,4.7z"/>
+</svg>
--- a/frontend/src/assets/icons/unlock.svg
+++ b/frontend/src/assets/icons/unlock.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>unlock</title>
+<g id="unlock">
+	<path id="形状结合" class="st0" d="M8,8c0-4.4,3.6-8,8-8c4.1,0,7.6,3,8,6.9c0.1,0.6-0.2,1.8-1.5,1.8c-1.3,0-1.6-1-1.7-1.6
+		C20.3,4.8,18.3,3,16,3c-2.8,0-5,2.5-5,5.6V12h14.3c2,0,3.7,1.8,3.7,4v12c0,2.2-1.7,4-3.7,4H6.7c-2,0-3.7-1.8-3.7-4V16
+		c0-2.2,1.7-4,3.7-4H8V8z M25,15H7c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h18c0.6,0,1-0.4,1-1V16C26,15.4,25.6,15,25,15z"/>
+</g>
+</svg>
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -8,6 +8,7 @@ import ModalPortal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import Icon from '../../components/icon';

 const propTypes = {
  isLocked: PropTypes.bool.isRequired,
@@ -90,11 +91,11 @@ class FileToolbar extends React.Component {
      if (!isLocked) {
        showLockUnlockBtn = true;
        lockUnlockText = gettext('Lock');
-        lockUnlockIcon = 'sf3-font sf3-font-lock';
+        lockUnlockIcon = 'lock';
      } else if (lockedByMe) {
        showLockUnlockBtn = true;
        lockUnlockText = gettext('Unlock');
-        lockUnlockIcon = 'sf3-font sf3-font-unlock';
+        lockUnlockIcon = 'unlock';
      }
    }

@@ -117,13 +118,13 @@ class FileToolbar extends React.Component {
          {fileType == 'PDF' && (
            <IconButton
              id="seafile-pdf-print"
-              icon="sf3-font sf3-font-print"
+              icon="print"
              text={gettext('Print')}
            />
          )}
          <IconButton
            id="open-parent-folder"
-            icon="sf3-font sf3-font-folder-open"
+            icon="open-folder"
            text={gettext('Open parent folder')}
            tag="a"
            href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
@@ -139,7 +140,7 @@ class FileToolbar extends React.Component {
          {showShareBtn && (
            <IconButton
              id="share-file"
-              icon='sf3-font sf3-font-share'
+              icon='share'
              text={gettext('Share')}
              onClick={this.toggleShareDialog}
            />
@@ -147,26 +148,26 @@ class FileToolbar extends React.Component {

          {(canEditFile && fileType != 'SDoc' && !err) &&
            (this.props.isSaving ?
-              <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                <i className='sf3-font sf3-font-spinner'/>
+              <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+                <Icon symbol="spinner" />
              </button>
              :
              (this.props.needSave ?
                <IconButton
                  text={gettext('Save')}
-                  id={'saveButton'}
-                  icon='sf3-font sf3-font-save'
+                  id='save-file'
+                  icon='save'
                  onClick={this.props.onSave}
                />
                :
-                <button type='button' className='btn btn-icon btn-secondary btn-active' disabled>
-                  <i className='sf3-font sf3-font-save'/>
+                <button type='button' className='btn btn-icon btn-secondary' disabled>
+                  <Icon symbol="save" />
                </button>
              ))}
          {canDownloadFile && (
            <IconButton
              id="download-file"
-              icon="sf3-font sf3-font-download1"
+              icon="download"
              text={gettext('Download')}
              tag="a"
              href="?dl=1"
@@ -174,22 +175,26 @@ class FileToolbar extends React.Component {
          )}
          <IconButton
            id="file-details"
-            icon='sf3-font sf3-font-info1'
+            icon='info'
            text={gettext('Details')}
            onClick={this.props.toggleDetailsPanel}
          />
          {filePerm == 'rw' && (
            <IconButton
              id="open-via-client"
-              icon="sf3-font sf3-font-desktop"
+              icon="client"
              text={gettext('Open via Client')}
              tag="a"
              href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`}
            />
          )}
          <ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
-            <DropdownToggle className="file-toolbar-more-operations" aria-label={gettext('More operations')}>
-              <span className="sf3-font sf3-font-more-vertical"></span>
+            <DropdownToggle
+              className="file-toolbar-more-operations btn-icon"
+              aria-label={gettext('More operations')}
+              title={gettext('More operations')}
+            >
+              <Icon symbol="more-vertical" />
            </DropdownToggle>
            <DropdownMenu right={true}>
              {filePerm == 'rw' && (
@@ -205,25 +210,27 @@ class FileToolbar extends React.Component {
          <ButtonGroup >
            {(canEditFile && fileType != 'SDoc' && !err) &&
                (this.props.isSaving ?
-                  <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                  <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+                    <Icon symbol="spinner" />
                  </button>
                  :
                  (this.props.needSave ?
                    <IconButton
                      text={gettext('Save')}
-                      id={'saveButton'}
-                      icon='sf3-font sf3-font-save'
+                      id="save-file"
+                      icon='save'
                      onClick={this.props.onSave}
                    />
                    :
-                    <button type='button' className={'btn btn-icon btn-secondary btn-active'} disabled>
-                      <i className={'sf3-font sf3-font-save'}/>
+                    <button type='button' className={'btn btn-icon btn-secondary'} disabled>
+                      <Icon symbol="save" />
                    </button>
                  ))}
          </ButtonGroup>

-          <DropdownToggle className="sf2-icon-more mx-1" aria-label={gettext('More operations')}></DropdownToggle>
+          <DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
+            <Icon symbol="more-vertical" />
+          </DropdownToggle>
          <DropdownMenu right={true}>
            <DropdownItem>
              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
--- a/frontend/src/components/icon-button.js
+++ b/frontend/src/components/icon-button.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Tooltip } from 'reactstrap';
+import Icon from './icon';

 const propTypes = {
  id: PropTypes.string.isRequired,
@@ -25,11 +26,12 @@ class IconButton extends React.Component {
      tooltipOpen: !this.state.tooltipOpen
    });
  };
+
  render() {
    const className = 'btn-icon';
    const btnContent = (
      <React.Fragment>
-        <i className={this.props.icon}></i>
+        <Icon symbol={this.props.icon} />
        <Tooltip
          toggle={this.toggle}
          delay={{ show: 0, hide: 0 }}
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -13,6 +13,14 @@ body {
  flex-shrink: 0;
 }

+.file-view-header .btn {
+  color: #666;
+}
+
+.file-view-header .btn#save-file {
+  color: #eb8205;
+}
+
 .file-view-header .file-toolbar-more-operations {
  height: 38px;
  padding: 0;
--- a/frontend/src/pages/markdown-editor/css/header-toolbar.css
+++ b/frontend/src/pages/markdown-editor/css/header-toolbar.css
@@ -20,6 +20,10 @@
  margin-right: 10px;
 }

+.sf-md-viewer-topbar .btn {
+  color: #666;
+}
+
 .collab-users-dropdown.dropdown {
  margin-right: 6px;
 }
--- a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'reactstrap';
+import Icon from '../../../components/icon';

 const propTypes = {
  id: PropTypes.string.isRequired,
@@ -100,7 +101,7 @@ class ButtonItem extends React.Component {
        onClick ={this.onClick}
        onMouseDown={this.onMouseDown}
      >
-        <i className={icon} />
+        <Icon symbol={icon} />
        <Tooltip target={id} isOpen={tooltipOpen} delay={delay} placement='bottom' toggle={this.toggle}>
          {text}
        </Tooltip>
--- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -6,6 +6,7 @@ import ButtonItem from './button-item';
 import CollabUsersButton from './collab-users-button';
 import MoreMenu from './more-menu';
 import FileInfo from './file-info';
+import Icon from '../../../components/icon';

 import '../css/header-toolbar.css';

@@ -80,13 +81,13 @@ class HeaderToolbar extends React.Component {
                <ButtonItem
                  text={gettext('Open parent directory')}
                  id='parentDirectory'
-                  icon='sf3-font sf3-font-folder-open'
+                  icon='open-folder'
                  onMouseDown={this.openParentDirectory}
                />
                {(canLockUnlockFile && !isLocked) && (
                  <ButtonItem
                    id="lock-unlock-file"
-                    icon='sf3-font sf3-font-lock'
+                    icon='lock'
                    text={gettext('Lock')}
                    onMouseDown={this.props.toggleLockFile}
                  />
@@ -94,7 +95,7 @@ class HeaderToolbar extends React.Component {
                {(canLockUnlockFile && lockedByMe) && (
                  <ButtonItem
                    id="lock-unlock-file"
-                    icon='sf3-font sf3-font-unlock'
+                    icon='unlock'
                    text={gettext('Unlock')}
                    onMouseDown={this.props.toggleLockFile}
                  />
@@ -103,22 +104,28 @@ class HeaderToolbar extends React.Component {
                  <ButtonItem
                    id='shareBtn'
                    text={gettext('Share')}
-                    icon='sf3-font sf3-font-share'
+                    icon='share'
                    onMouseDown={this.props.toggleShareLinkDialog}
                  />
                )}
                {saving ?
                  <button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                  </button>
                  :
-                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon='sf3-font sf3-font-save' disabled={!contentChanged}
-                    onMouseDown={this.props.onSaveEditorContent} isActive={contentChanged}/>
+                  <ButtonItem
+                    text={gettext('Save')}
+                    id={'saveButton'}
+                    icon='save'
+                    disabled={!contentChanged}
+                    onMouseDown={this.props.onSaveEditorContent}
+                    isActive={contentChanged}
+                  />
                }
                {canDownloadFile && (
                  <ButtonItem
                    id="download-file"
-                    icon="sf3-font sf3-font-download1"
+                    icon="download"
                    text={gettext('Download')}
                    onClick={this.downloadFile}
                  />
@@ -126,7 +133,7 @@ class HeaderToolbar extends React.Component {
                {this.props.fileInfo.permission == 'rw' && (
                  <ButtonItem
                    id="open-via-client"
-                    icon="sf3-font sf3-font-desktop"
+                    icon="client"
                    text={gettext('Open via Client')}
                    onClick={this.openFileViaClient}
                  />
@@ -153,11 +160,17 @@ class HeaderToolbar extends React.Component {
              <ButtonGroup>
                {saving ?
                  <button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                  </button>
                  :
-                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon='sf3-font sf3-font-save' disabled={!contentChanged}
-                    onMouseDown={this.props.onSaveEditorContent} isActive={contentChanged}/>
+                  <ButtonItem
+                    text={gettext('Save')}
+                    id={'saveButton'}
+                    icon='save'
+                    disabled={!contentChanged}
+                    onMouseDown={this.props.onSaveEditorContent}
+                    isActive={contentChanged}
+                  />
                }
              </ButtonGroup>
              <MoreMenu
@@ -194,10 +207,17 @@ class HeaderToolbar extends React.Component {
              <ButtonGroup>
                {saving ?
                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                  </button>
                  :
-                  <ButtonItem id={'saveButton'} text={gettext('Save')} icon='sf3-font sf3-font-save' onMouseDown={this.props.onSaveEditorContent} disabled={!contentChanged} isActive={contentChanged} />
+                  <ButtonItem
+                    id={'saveButton'}
+                    text={gettext('Save')}
+                    icon='save'
+                    onMouseDown={this.props.onSaveEditorContent}
+                    disabled={!contentChanged}
+                    isActive={contentChanged}
+                  />
                }
              </ButtonGroup>
              <MoreMenu
@@ -216,13 +236,13 @@ class HeaderToolbar extends React.Component {
              <ButtonGroup>
                {saving ?
                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                  </button>
                  :
                  <ButtonItem
                    id={'saveButton'}
                    text={gettext('Save')}
-                    icon='sf3-font sf3-font-save'
+                    icon='save'
                    onMouseDown={this.props.onSaveEditorContent}
                    disabled={!contentChanged}
                    isActive={contentChanged}
--- a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { EXTERNAL_EVENTS, EventBus } from '@seafile/seafile-editor';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
 import { gettext, canGenerateShareLink } from '../../../utils/constants';
+import Icon from '../../../components/icon';

 const { canDownloadFile } = window.app.pageOptions;

@@ -51,7 +52,7 @@ class MoreMenu extends React.PureComponent {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
        <DropdownToggle id="moreButton" aria-label={gettext('More operations')}>
-          <i className="sf3-font sf3-font-more-vertical"/>
+          <Icon symbol="more-vertical" />
          <Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
          </Tooltip>
        </DropdownToggle>