refactor: replace icons with MS Fabric icons (#5)

* refactor: replace icons with MS Fabric icons

replace tag toolbar rename icon and remove font awesome classes from tags

issue-6049115

* Update tagInputToolbar.tsx

Co-authored-by: kunzheng <58841788+kunzms@users.noreply.github.com>

src/react/components/common/tagInput/tagInput.scss

@@ -121,7 +121,7 @@ $tagInputWidth: 250px;
             text-overflow: ellipsis;
             white-space: nowrap;
             align-items: center;
-            padding: 0px 0px 5px 0px; 
+            padding: 0px 0px 4px 0px; 
         }
     }
 

src/react/components/common/tagInput/tagInputToolbar.tsx

@@ -78,7 +78,7 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
             {
                 displayName: strings.tags.toolbar.edit,
                 className: "edit",
-                icon: "ms-Icon ms-Icon--Edit ms-Icon-1x",
+                icon: "ms-Icon ms-Icon--Rename ms-Icon-1x",
                 category: Categories.Modifier,
                 handler: this.handleEdit,
             },
@@ -107,7 +107,8 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
     }
 
     private handleTagIcon = () => {
-        const classNames = ["tag-input-toolbar-icon", "fas"];
+        const classNames = ["tag-input-toolbar-icon"];
+
         if (this.props.selectedTag === null) {
             classNames.push("tag-input-toolbar-icon-unselected");
         }
@@ -118,7 +119,7 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
                                 key={itemConfig.displayName}
                                 className={`tag-input-toolbar-item ${itemConfig.className}`}
                                 onClick={(e) => this.onToolbarItemClick(e, itemConfig)}>
-                                <i className={`tag-input-toolbar-icon fas ${itemConfig.icon}`}/>
+                                <i className={`tag-input-toolbar-icon ${itemConfig.icon}`}/>
                             </div>);
                 } else if (itemConfig.category === Categories.Separator) {
                     return (<div className="tag-tool-bar-vertical-line"></div>);

src/react/components/pages/editorPage/canvas.scss

@@ -32,10 +32,6 @@
   &:active {
       background-color: $darker-2;
   }
-
-  .fas {
-      font-size: 18px;
-  }
 }
 
 .prev {

src/react/components/toolbar/toolbarItem.tsx

@@ -89,7 +89,7 @@ export abstract class ToolbarItem extends React.Component<IToolbarItemProps> {
                     className={className.join(" ")}
                     title={this.getTitle()}
                     onClick={this.onClick}>
-                    <i className={"fas " + this.props.icon} />
+                    <i className={this.props.icon} />
                 </button>
             </Fragment>
         );