Add new DecoratedIcon component (#20516)

This PR creates a new, revamped `DecoratedIcon` component that enables
using different SVGs, one for the knockout background and another for
the actual icon. That's different than what we were doing before—copying
the SVG and using slightly different positioning—because we wanted to
unlock an aligned knockout effect, which was particularly hard to do
with non-simple shapes such as an X.

Release Notes:

- N/A

---------

Co-authored-by: Nate Butler <1714999+iamnbutler@users.noreply.github.com>

crates/workspace/src/theme_preview.rs

@@ -5,7 +5,8 @@ use theme::all_theme_colors;
 use ui::{
     element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio, AudioStatus,
     Availability, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
-    Checkbox, CheckboxWithLabel, ElevationIndex, Facepile, Indicator, Table, TintColor, Tooltip,
+    Checkbox, CheckboxWithLabel, DecoratedIcon, ElevationIndex, Facepile, IconDecoration,
+    Indicator, Table, TintColor, Tooltip,
 };
 
 use crate::{Item, Workspace};
@@ -509,6 +510,8 @@ impl ThemePreview {
             .overflow_scroll()
             .size_full()
             .gap_2()
+            .child(IconDecoration::render_component_previews(cx))
+            .child(DecoratedIcon::render_component_previews(cx))
             .child(Checkbox::render_component_previews(cx))
             .child(CheckboxWithLabel::render_component_previews(cx))
             .child(Facepile::render_component_previews(cx))