diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field_container.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field_container.tsx
index 39c0add40e9ad..076cda484d808 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field_container.tsx
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/create_edit_field/create_edit_field_container.tsx
@@ -26,31 +26,31 @@ import { useKibana } from '../../../../../../plugins/kibana_react/public';
 import { IndexPatternManagmentContext } from '../../../types';
 import { CreateEditField } from './create_edit_field';
 
-export type CreateEditFieldContainerProps = RouteComponentProps<{ id: string; fieldName: string }>;
+export type CreateEditFieldContainerProps = RouteComponentProps<{ id: string; fieldName?: string }>;
 
 const CreateEditFieldCont: React.FC<CreateEditFieldContainerProps> = ({ ...props }) => {
   const { setBreadcrumbs, data } = useKibana<IndexPatternManagmentContext>().services;
   const [indexPattern, setIndexPattern] = useState<IndexPattern>();
+  const fieldName =
+    props.match.params.fieldName && decodeURIComponent(props.match.params.fieldName);
 
   useEffect(() => {
     data.indexPatterns.get(props.match.params.id).then((ip: IndexPattern) => {
       setIndexPattern(ip);
       if (ip) {
         setBreadcrumbs(
-          props.match.params.fieldName
-            ? getEditFieldBreadcrumbs(ip, props.match.params.fieldName)
-            : getCreateFieldBreadcrumbs(ip)
+          fieldName ? getEditFieldBreadcrumbs(ip, fieldName) : getCreateFieldBreadcrumbs(ip)
         );
       }
     });
-  }, [props.match.params.id, props.match.params.fieldName, setBreadcrumbs, data.indexPatterns]);
+  }, [props.match.params.id, fieldName, setBreadcrumbs, data.indexPatterns]);
 
   if (indexPattern) {
     return (
       <CreateEditField
         indexPattern={indexPattern}
-        mode={props.match.params.fieldName ? 'edit' : 'create'}
-        fieldName={props.match.params.fieldName}
+        mode={fieldName ? 'edit' : 'create'}
+        fieldName={fieldName}
       />
     );
   } else {
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.test.ts b/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.test.ts
new file mode 100644
index 0000000000000..0e3ee27476fcc
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.test.ts
@@ -0,0 +1,30 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getPath } from './utils';
+import { IndexPatternField, IndexPattern } from '../../../../../data/public';
+
+test('getPath() should encode "fieldName"', () => {
+  expect(
+    getPath(
+      ({ name: 'Memory: Allocated Bytes/sec' } as unknown) as IndexPatternField,
+      ({ id: 'id' } as unknown) as IndexPattern
+    )
+  ).toMatchInlineSnapshot(`"/patterns/id/field/Memory%3A%20Allocated%20Bytes%2Fsec"`);
+});
diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.ts b/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.ts
index 91c5cc1afdb49..a94ed60b7aed5 100644
--- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.ts
+++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/utils.ts
@@ -117,7 +117,7 @@ export function getTabs(
 }
 
 export function getPath(field: IndexPatternField, indexPattern: IndexPattern) {
-  return `/patterns/${indexPattern?.id}/field/${field.name}`;
+  return `/patterns/${indexPattern?.id}/field/${encodeURIComponent(field.name)}`;
 }
 
 const allTypesDropDown = i18n.translate(