From 5bcefcfee87c50bef51e21291f6d72e158481362 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 16 Oct 2024 10:36:17 -0400
Subject: [PATCH] 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>
---
 .../manager/.changeset/pr-11100-changed-1729010084175.md    | 5 +++++
 packages/manager/src/assets/icons/cloud-init.svg            | 4 ++++
 packages/manager/src/components/ImageSelect/ImageOption.tsx | 6 +++---
 .../manager/src/components/ImageSelectv2/ImageOptionv2.tsx  | 6 ++++--
 4 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-11100-changed-1729010084175.md
 create mode 100644 packages/manager/src/assets/icons/cloud-init.svg

diff --git a/packages/manager/.changeset/pr-11100-changed-1729010084175.md b/packages/manager/.changeset/pr-11100-changed-1729010084175.md
new file mode 100644
index 00000000000..e7ad10fb5e3
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..b348e0fabb2
--- /dev/null
+++ b/packages/manager/src/assets/icons/cloud-init.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.2717 3.0044C10.3912 2.96836 11.5084 3.15423 12.541 3.55146C13.5737 3.94871 14.5011 4.54958 15.2482 5.31756C15.8135 5.89863 16.2649 6.5646 16.5794 7.28743H16.9122C18.0111 7.28806 19.092 7.60773 19.9832 8.21346C20.8758 8.8202 21.539 9.68879 21.8337 10.7004C22.1294 11.7157 22.0276 12.7876 21.5538 13.737C21.082 14.6823 20.2784 15.4355 19.2975 15.9028C18.7989 16.1403 18.2022 15.9287 17.9646 15.4301C17.7271 14.9315 17.9388 14.3347 18.4374 14.0972C19.0524 13.8042 19.5094 13.3546 19.7642 12.844C20.017 12.3375 20.0661 11.7837 19.9135 11.2598C19.7599 10.7322 19.4009 10.236 18.8589 9.86753C18.3155 9.4982 17.6306 9.28795 16.9122 9.28743M16.9122 9.28743H15.8814C15.4383 9.28743 15.0481 8.99595 14.9224 8.57114C14.7233 7.89792 14.3485 7.26094 13.8147 6.71218C13.2803 6.16289 12.6011 5.71748 11.8229 5.41811C11.0446 5.11871 10.1938 4.97574 9.33605 5.00336C8.47825 5.03098 7.64341 5.2282 6.89518 5.57557C6.14705 5.92288 5.5107 6.40841 5.02707 6.98693C4.54401 7.56478 4.22553 8.22034 4.08412 8.9019C3.94286 9.58279 3.97964 10.2825 4.19355 10.9522C4.40775 11.6227 4.79695 12.2543 5.34369 12.7949C5.7364 13.1832 5.73997 13.8163 5.35166 14.209C4.96334 14.6018 4.33018 14.6053 3.93747 14.217C3.17399 13.4621 2.60614 12.5554 2.28839 11.5607C1.97036 10.5651 1.91414 9.5159 2.12582 8.49561C2.33737 7.476 2.80859 6.52243 3.49262 5.70418C4.17609 4.8866 5.05384 4.22539 6.05301 3.76152C7.05207 3.29771 8.15225 3.04044 9.2717 3.0044" />
+    <path d="M15.7693 16.7271L15.5814 16.6186C15.3578 16.4896 15.2243 16.2582 15.2243 16C15.2243 15.7418 15.3578 15.5104 15.5814 15.3814L15.7693 15.2729C16.2821 14.9764 16.4575 14.3221 16.1614 13.8093L15.8043 13.1907C15.5089 12.6789 14.8521 12.5032 14.3407 12.7986L14.1528 12.9068C13.9293 13.0361 13.6618 13.0361 13.4386 12.9068C13.215 12.7775 13.0814 12.5464 13.0814 12.2882V12.0714C13.0814 11.4807 12.6007 11 12.01 11H11.2957C10.705 11 10.2243 11.4807 10.2243 12.0714V12.2886C10.2243 12.5468 10.0907 12.7779 9.86712 12.9071C9.64355 13.0361 9.37641 13.0364 9.15284 12.9071L8.96498 12.7986C8.45355 12.5032 7.79677 12.6789 7.50105 13.1907L7.14391 13.8093C6.84784 14.3221 7.0232 14.9768 7.53605 15.2729L7.72427 15.3814C7.94784 15.5104 8.08141 15.7418 8.08141 16C8.08141 16.2582 7.94784 16.4896 7.72427 16.6186L7.53641 16.7271C7.02355 17.0232 6.8482 17.6779 7.14427 18.1907L7.50141 18.8093C7.79712 19.3211 8.45391 19.4968 8.96498 19.2014L9.15284 19.0932C9.37641 18.9636 9.64355 18.9643 9.86712 19.0932C10.0907 19.2225 10.2243 19.4536 10.2243 19.7118V19.9286C10.2243 20.5193 10.705 21 11.2957 21H12.01C12.6007 21 13.0814 20.5193 13.0814 19.9286V19.7114C13.0814 19.4532 13.215 19.2221 13.4386 19.0929C13.6618 18.9639 13.9293 18.9636 14.1528 19.0929L14.3407 19.2014C14.8521 19.4964 15.5089 19.3207 15.8043 18.8093L16.1614 18.1907C16.4575 17.6779 16.2821 17.0232 15.7693 16.7271ZM11.6528 17.7857C10.6682 17.7857 9.86712 16.9846 9.86712 16C9.86712 15.0154 10.6682 14.2143 11.6528 14.2143C12.6375 14.2143 13.4386 15.0154 13.4386 16C13.4386 16.9846 12.6375 17.7857 11.6528 17.7857Z" />
+</svg>
diff --git a/packages/manager/src/components/ImageSelect/ImageOption.tsx b/packages/manager/src/components/ImageSelect/ImageOption.tsx
index c619d845fa2..362382fe9cd 100644
--- 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
index f383832e6e2..f34e5da413f 100644
--- 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 />}