19504: Use MDI frozen icon for better icon alignment

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 3237f80063bb8cfc6218b8d08cae51631d2c9f96..38c2a394b9b71f8226cf30027e844bb3950e88a1 100644 (file)
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -52,17 +52,19 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         opacity: 1
     },
     label: {
-        textTransform: "none"
+        textTransform: "none",
+        paddingRight: '3px',
+        paddingLeft: '3px',
     },
     icon: {
         fontSize: 20,
         color: grey["600"],
-        marginRight: '10px',
+        marginRight: '5px',
     },
     frozenIcon: {
         fontSize: 20,
         color: grey["600"],
-        marginLeft: '10px',
+        marginLeft: '3px',
     },
 });
 

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 7fd32e5438279e55aab8be89f3072f418151e977..4446f92a8f7c0a47ae80ebbd8d840bc59d110962 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -87,18 +87,14 @@ library.add(
 );
 
 export const FreezeIcon = (props: any) =>
-    <span {...props}>
-        <span className='fas fa-snowflake' />
-    </span>
+    <SvgIcon {...props}>
+        <path d="M20.79,13.95L18.46,14.57L16.46,13.44V10.56L18.46,9.43L20.79,10.05L21.31,8.12L19.54,7.65L20,5.88L18.07,5.36L17.45,7.69L15.45,8.82L13,7.38V5.12L14.71,3.41L13.29,2L12,3.29L10.71,2L9.29,3.41L11,5.12V7.38L8.5,8.82L6.5,7.69L5.92,5.36L4,5.88L4.47,7.65L2.7,8.12L3.22,10.05L5.55,9.43L7.55,10.56V13.45L5.55,14.58L3.22,13.96L2.7,15.89L4.47,16.36L4,18.12L5.93,18.64L6.55,16.31L8.55,15.18L11,16.62V18.88L9.29,20.59L10.71,22L12,20.71L13.29,22L14.7,20.59L13,18.88V16.62L15.5,15.17L17.5,16.3L18.12,18.63L20,18.12L19.53,16.35L21.3,15.88L20.79,13.95M9.5,10.56L12,9.11L14.5,10.56V13.44L12,14.89L9.5,13.44V10.56Z" />
+    </SvgIcon>
 
 export const UnfreezeIcon = (props: any) =>
-    <div {...props}>
-        <div className="fa-layers fa-1x fa-fw">
-            <span className="fas fa-slash"
-                data-fa-mask="fas fa-snowflake" data-fa-transform="down-1.5" />
-            <span className="fas fa-slash" />
-        </div>
-    </div>;
+    <SvgIcon {...props}>
+        <path d="M11 5.12L9.29 3.41L10.71 2L12 3.29L13.29 2L14.71 3.41L13 5.12V7.38L15.45 8.82L17.45 7.69L18.07 5.36L20 5.88L19.54 7.65L21.31 8.12L20.79 10.05L18.46 9.43L16.46 10.56V13.26L14.5 11.3V10.56L12.74 9.54L10.73 7.53L11 7.38V5.12M18.46 14.57L16.87 13.67L19.55 16.35L21.3 15.88L20.79 13.95L18.46 14.57M13 16.62V18.88L14.7 20.59L13.29 22L12 20.71L10.71 22L9.29 20.59L11 18.88V16.62L8.55 15.18L6.55 16.31L5.93 18.64L4 18.12L4.47 16.36L2.7 15.89L3.22 13.96L5.55 14.58L7.55 13.45V10.56L5.55 9.43L3.22 10.05L2.7 8.12L4.47 7.65L4 5.89L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73L14.1 16L13 16.62M12 14.89L12.63 14.5L9.5 11.39V13.44L12 14.89Z" />
+    </SvgIcon>
 
 export const PendingIcon = (props: any) =>
     <span {...props}>