change: [M3-8749] - Add and use new cloud-init icon (#11100)

* add and use the new icon * Added changeset: Add and use new cloud-init icon --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Oct 16, 2024 · 5bcefcf · 5bcefcf
1 parent 4e7cb48
commit 5bcefcf
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/packages/manager/.changeset/pr-11100-changed-1729010084175.md b/packages/manager/.changeset/pr-11100-changed-1729010084175.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Add and use new cloud-init icon ([#11100](https://github.com/linode/manager/pull/11100))
diff --git a/packages/manager/src/assets/icons/cloud-init.svg b/packages/manager/src/assets/icons/cloud-init.svg
diff --git a/packages/manager/src/components/ImageSelect/ImageOption.tsx b/packages/manager/src/components/ImageSelect/ImageOption.tsx
@@ -1,7 +1,7 @@
-import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
-import * as React from 'react';
+import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
+import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
 import DistributedRegionIcon from 'src/assets/icons/entityIcons/distributed-region.svg';
 import { Box } from 'src/components/Box';
 import { Option } from 'src/components/EnhancedSelect/components/Option';
@@ -82,7 +82,7 @@ export const ImageOption = (props: ImageOptionProps) => {
         )}
         {flags.metadata && data.isCloudInitCompatible && (
           <Tooltip title="This image is compatible with cloud-init.">
-            <DescriptionOutlinedIcon />
+            <CloudInitIcon />
           </Tooltip>
         )}
       </Stack>

diff --git a/packages/manager/src/components/ImageSelectv2/ImageOptionv2.tsx b/packages/manager/src/components/ImageSelectv2/ImageOptionv2.tsx
@@ -1,6 +1,6 @@
-import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import React from 'react';
 
+import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
 import DistributedRegionIcon from 'src/assets/icons/entityIcons/distributed-region.svg';
 import { useFlags } from 'src/hooks/useFlags';
 
@@ -47,7 +47,9 @@ export const ImageOptionv2 = ({ image, isSelected, listItemProps }: Props) => {
         )}
         {flags.metadata && image.capabilities.includes('cloud-init') && (
           <Tooltip title="This image is compatible with cloud-init.">
-            <DescriptionOutlinedIcon />
+            <div style={{ display: 'flex' }}>
+              <CloudInitIcon />
+            </div>
           </Tooltip>
         )}
         {isSelected && <SelectedIcon visible />}