feat: new Compose Model icon (#425)

* feat: new Compose Modes icon

* return EOLs

* fix: after merge

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

docs/manual_testing/manual-test-runbook.md

@@ -319,8 +319,9 @@ ___
 **Given** I've opened a project containing documents and I'm on the Model Compose page. There are enough existing models in modelList.  
 **When** I select more than one models then click compose button  
 **Then** I should see a pop up modal with a list contains selected models and a input field.  
-**When** I type customized model name in input field and click compose button on modal  
-**Then** I should see "Model is composing, please wait...". After that the list shows up again, new composed model with given name will be on the top of the list. The new composed model also has a "combine" icon. 
+**When** I type customerized model name in input field and click compose button on modal  
+**Then** I should see "Model is composing, please wait...". After that the list shows up again, new composed model with given name will be on the top of the list. The new composed model also has a "Merge" icon. 
+
 
 #### Scenario Three ####
 

src/config/fabric-icons.json

@@ -245,6 +245,10 @@
     {
       "name": "SquareShape",
       "unicode": "F1A6"
+    },
+    {
+      "name": "Merge",
+      "unicode": "E7D5"
     }
   ]
-}
+}

src/react/components/pages/modelCompose/composeCommandBar.tsx

@@ -25,7 +25,7 @@ export const ModelComposeCommandBar: React.FunctionComponent<IModelComposeComman
             key: "Compose",
             text: "Compose",
             ariaLabel: strings.modelCompose.commandBar.composeAria,
-            iconProps: { iconName: "combine" },
+            iconProps: { iconName: "Merge" },
             onClick: () => {props.handleCompose(); },
         },
         {

src/react/components/pages/modelCompose/modelCompose.tsx

@@ -714,7 +714,7 @@ export default class ModelComposePage extends React.Component<IModelComposePageP
 
     private renderComposedIcon = (model: IModel): ReactElement => {
         if (model.attributes && model.attributes.isComposed) {
-            return <FontIcon iconName={"Combine"} className="model-fontIcon"/>;
+            return <FontIcon iconName={"Merge"} className="model-fontIcon"/>;
         } else {
             return null;
         }

src/react/components/shell/sidebar.tsx

@@ -43,7 +43,7 @@ export function Sidebar({ project }) {
                     <ConditionalNavLink disabled={!projectId}
                         title={`Model Compose`}
                         to={`/projects/${projectId}/modelcompose`}>
-                        <FontIcon iconName="combine"/>
+                        <FontIcon iconName="Merge"/>
                     </ConditionalNavLink>
                 </li>
                 <li>

src/registerIcons.ts

@@ -39,7 +39,6 @@ export function registerIcons() {
             Info: "\uE946",
             AddTo: "\uECC8",
             OpenFolderHorizontal: "\uED25",
-            Combine: "\uEDBB",
             SortUp: "\uEE68",
             SortDown: "\uEE69",
             DocumentManagement: "\uEFFC",
@@ -70,6 +69,7 @@ export function registerIcons() {
             ChromeMinimize: "\uE921",
             System: "\uE770",
             SquareShape: "\uF1A6",
+            Merge: "\uE7D5",
         },
     });
 }