Revize fa93df26

Icons

webapp/components/annotation/CategoryItem.tsx

@@ -1 +1 @@
 import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { Button, Tooltip } from 'antd';
-import {
-    DownOutlined,
-    QuestionCircleOutlined,
-    TagOutlined,
-    UpOutlined,
-} from '@ant-design/icons';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { TagCategoryInfo } from '../../api';
 import React, { useState } from 'react';
 import { TagItem } from './TagItem';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
 /**
  * Creates a single item for a category in a tag panel.
  * @param props Properties should contain a category.
@@ -24 +23 @@
     /**
      * Button icon.
      */
-    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />);
+    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(
+        <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
+    );
 
     /**
      * Changes visibility of tags.
      */
     const changeTagsVisibility = () => {
-        setButtonIcon(visibleTags ? <DownOutlined /> : <UpOutlined />);
+        setButtonIcon(
+            visibleTags ? (
+                <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
+            ) : (
+                <FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
+            )
+        );
         setVisibleTags(!visibleTags);
     };
 
@@ -49 +56 @@
                             title={props.category.description}
                             key={props.category.description}
                         >
-                            <QuestionCircleOutlined />
+                            <FontAwesomeIcon icon={faCircleQuestion} />
                         </Tooltip>
                     )}
                 </Button>