Icon updates

assets/media/styles.css

@@ -138,6 +138,7 @@
 
 .article__tags__input button {
   position: absolute;
+  bottom: 1px;
   top: 1px;
   right: 1px;
   width: 30px;
@@ -179,23 +180,23 @@
   margin-right: .5rem;
 }
 
-.article__tags__items__item_add {
-  display: inline-flex;
-  align-items: center;
-  width: auto;
+.article__tags__items__item {
+  display: inline-block;
+  margin-bottom: .5rem;
+  margin-right: .5rem;
 }
 
+.article__tags__items__item_add,
 .article__tags__items__item_delete {
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
   width: auto;
 }
 
-.article__tags__items__item_delete i {
-  margin-left: 0.5rem;
+.article__tags__items__item svg {
+  display: inline;
+  vertical-align: bottom;
 }
 
-
 .article__tags__items__item_delete span {
   margin-left: .5rem;
 }

src/viewpanel/components/Tag.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { Icon } from './Icon';
 
 export interface ITagProps {
   className: string;
@@ -19,10 +18,9 @@ export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithCh
     <div className={`article__tags__items__item`}>
       {
         onCreate && 
-        <button title={`Add ${value} to your settings`} className={`article__tags__items__item_add`} onClick={() => onCreate(value)}><Icon name="add" /></button>
+        <button title={`Add ${value} to your settings`} className={`article__tags__items__item_add`} onClick={() => onCreate(value)}><AddIcon /></button>
       }
-      
-      <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <Icon name={`archive`} /></button>
+      <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><DeleteIcon /></span></button>
     </div>
   );
 };

src/viewpanel/components/TagPicker.tsx

@@ -6,6 +6,7 @@ import { TagType } from '../TagType';
 import { MessageHelper } from '../helper/MessageHelper';
 import Downshift from 'downshift';
 import LocalOfferTwoToneIcon from '@material-ui/icons/LocalOfferTwoTone';
+import { Icon } from './Icon';
 
 export interface ITagPickerProps {
   type: string;
@@ -146,10 +147,11 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                 
                 {
                   freeform && (
-                    <button title={`Add the unknown tag`}
+                    <button className={`article__tags__input__button`}
+                            title={`Add the unknown tag`}
                             disabled={!inputValue} 
                             onClick={() => insertUnkownTag(closeMenu)}>
-                      <LocalOfferTwoToneIcon />
+                      <Icon name="tag" />
                     </button>
                   )
                 }