Wpf – Trabajar con imágenes con formato XAML

Obtener la librería de iconos

La ultima descarga de la librería de imágenes de Visual Studio Image Library permite descargar el ultimo archivo del año 2026 de imágenes de iconos para las aplicaciones .

Una vez descargado el archivo zip, al descomprimirlo veremos una carpeta con las imágenes para MAC y otra con las imágenes para Windows. En la imagen siguiente ya he borrado las imagebes de MAC porque no voy a usarlas nunca

Cada icono tiene tres formatos de imagen, Png, svg y Xaml

En este documento me voy a centrar en la utilización de imágenes xaml.

Una observación. En la carpeta de imágenes del año 2022, tiene la misma estructura, aunque el código xaml del icono es un poco diferente.

Librería 2026

Librería 2026 - Ejemplo Uno - Incluirlo directamente como imagen en un botón

Ejemplo código xaml del icono papelera, que en la pagina Hrml que contiene todos los iconos figura de la siguiente manera:

y en la carpeta [Images] figura asi:

Usando el botón derecho del ratón, abrimos el documento [ Delete.xaml], y le decimos que queremos abrirlo con el bloc de notas. El resultado se muestra a continuación.

<Viewbox xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas Background = "Transparent" Width = "16" Height = "16">
    <Path Data = "M7 3H9C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3ZM6 3C6 1.89543 6.89543 1 8 1C9.10457 1 10 1.89543 10 3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13.4364L12.2313 12.8378C12.0624 14.0765 11.0044 15 9.75422 15H6.24578C4.99561 15 3.93762 14.0765 3.76871 12.8378L2.56355 4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H6ZM7 6.5C7 6.22386 6.77614 6 6.5 6C6.22386 6 6 6.22386 6 6.5V11.5C6 11.7761 6.22386 12 6.5 12C6.77614 12 7 11.7761 7 11.5V6.5ZM9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6ZM4.75954 12.7027C4.86089 13.4459 5.49568 14 6.24578 14H9.75422C10.5043 14 11.1391 13.4459 11.2405 12.7027L12.4272 4H3.57281L4.75954 12.7027Z"
 Fill = "#202020" />
  </Canvas>
</Viewbox>

Como incluirlo en un botón

            <Button x:Name = "ButtonBorrar03"
                    IsCancel = "False"
                    IsDefault = "False" 
                    IsEnabled = "True"
                    Height = "50" Width = "100">
                <Button.ToolTip>
                    Borrar lo que sea que borre
                </Button.ToolTip>
                <Button.Content>
                    <Viewbox xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                        <Canvas Background = "Transparent" Width = "16" Height = "16">
                            <Path Data = "M7 3H9C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3ZM6 3C6 1.89543 6.89543 1 8 1C9.10457 1 10 1.89543 10 3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13.4364L12.2313 12.8378C12.0624 14.0765 11.0044 15 9.75422 15H6.24578C4.99561 15 3.93762 14.0765 3.76871 12.8378L2.56355 4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H6ZM7 6.5C7 6.22386 6.77614 6 6.5 6C6.22386 6 6 6.22386 6 6.5V11.5C6 11.7761 6.22386 12 6.5 12C6.77614 12 7 11.7761 7 11.5V6.5ZM9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6ZM4.75954 12.7027C4.86089 13.4459 5.49568 14 6.24578 14H9.75422C10.5043 14 11.1391 13.4459 11.2405 12.7027L12.4272 4H3.57281L4.75954 12.7027Z"
                                  Fill = "#202020" />
                        </Canvas>
                    </Viewbox>
                </Button.Content>
            </Button>

Ejemplo dos, como incluirlo en un botón con texto

          <Button x:Name = "ButtonBorrar02"
                    IsCancel = "False"
                    IsDefault = "False" 
                    IsEnabled = "True"
                    Height = "50" Width = "100">
                        </Button.ToolTip>
                    Borrar lo que sea que borre
                </Button.ToolTip>
                  <Button.Content>
                    <StackPanel  Orientation = "Horizontal"  HorizontalAlignment = "Left" VerticalAlignment = "Center">
                        <Viewbox xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                            <Canvas Background = "Transparent" Width = "16" Height = "16">
                                <Path Data = "M7 3H9C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3ZM6 3C6 1.89543 6.89543 1 8 1C9.10457 1 10 1.89543 10 3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13.4364L12.2313 12.8378C12.0624 14.0765 11.0044 15 9.75422 15H6.24578C4.99561 15 3.93762 14.0765 3.76871 12.8378L2.56355 4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H6ZM7 6.5C7 6.22386 6.77614 6 6.5 6C6.22386 6 6 6.22386 6 6.5V11.5C6 11.7761 6.22386 12 6.5 12C6.77614 12 7 11.7761 7 11.5V6.5ZM9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6ZM4.75954 12.7027C4.86089 13.4459 5.49568 14 6.24578 14H9.75422C10.5043 14 11.1391 13.4459 11.2405 12.7027L12.4272 4H3.57281L4.75954 12.7027Z"
                                      Fill = "#202020" />
                            </Canvas>
                        </Viewbox>
                        <Label  Content = "Borrar"
                                HorizontalAlignment = "Left"
                                VerticalAlignment = "Center"  />
                    </StackPanel>
                </Button.Content>
            </Button>

Librería 2026 - Ejemplo Uno - Incluirlo en Resources

ATENCIÓN Hay que trasformar :

<Canvas Background = "Transparent" Width = "16" Height = "16">
         <Path Data = "M7 3H9C9 2.44772 etc, etc " Fill = "#202020" />
</Canvas>

Fíjate que sustituimos la línea

  <Path Data = "M7 3H9C9 2.44772 etc, etc " Fill = "#202020" />

Por la siguiente. Observa que los datos son los mismos, pero cambian las propiedades de la etiqueta

<GeometryDrawing Brush = "#ff202020"  Geometry = "M7 3H9C9 2.44772 etc, etc " />

El código que guardaremos en Resources, será el siguiente:

 <Window.Resources>
        <!-- Icono SVG 2026 convertido a DrawingImage para usar como ImageSource -->
        <DrawingImage x:Key = "DeleteIcon">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush = "#ff202020"
                                   Geometry = "M7 3H9C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3ZM6 3C6 1.89543 6.89543 1 8 1C9.10457 1 10 1.89543 10 3H14C14.2761 3 14.5 3.22386 14.5 3.5C14.5 3.77614 14.2761 4 14 4H13.4364L12.2313 12.8378C12.0624 14.0765 11.0044 15 9.75422 15H6.24578C4.99561 15 3.93762 14.0765 3.76871 12.8378L2.56355 4H2C1.72386 4 1.5 3.77614 1.5 3.5C1.5 3.22386 1.72386 3 2 3H6ZM7 6.5C7 6.22386 6.77614 6 6.5 6C6.22386 6 6 6.22386 6 6.5V11.5C6 11.7761 6.22386 12 6.5 12C6.77614 12 7 11.7761 7 11.5V6.5ZM9.5 6C9.77614 6 10 6.22386 10 6.5V11.5C10 11.7761 9.77614 12 9.5 12C9.22386 12 9 11.7761 9 11.5V6.5C9 6.22386 9.22386 6 9.5 6ZM4.75954 12.7027C4.86089 13.4459 5.49568 14 6.24578 14H9.75422C10.5043 14 11.1391 13.4459 11.2405 12.7027L12.4272 4H3.57281L4.75954 12.7027Z"/>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
 </Window.Resources>

Librería 2026 - Ejemplo Uno - Usar un icono de Resources en un botón

           <Button x:Name = "ButtonBorrar01"
                    IsCancel = "False"
                    IsDefault = "False" 
                    IsEnabled = "True"
                    Height = "50" Width = "100">
               </Button.ToolTip>
                    Borrar lo que sea que borre
                </Button.ToolTip>
                  <Button.Content>
                    <Image x:Name = "ButtonBorrar01Image"
                              Source = "{StaticResource  DeleteIcon}"
                           Width = "32" Height = "32" VerticalAlignment = "Center"
                           Margin = "2,0,0,0" Visibility = "Visible"
                           ToolTip = "Eliminar el contenido"/>
                </Button.Content>
            </Button>

Librería 2026 - Ejemplo DOS

El código xaml del icono [CloudWarning.xaml] copiado

                <Viewbox xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                    <Canvas Background = "Transparent" Width = "16" Height = "16">
                        <Path Data = "M5 6C5 4.34315 6.34315 3 8 3C9.65685 3 11 4.34315 11 6C11 6.02147 11.0014 6.04263 11.004 6.06339C11.1664 6.0215 11.3342 6 11.5035 6C11.8754 6 12.2399 6.10367 12.5561 6.29937C12.8723 6.49507 13.1276 6.77505 13.2935 7.10787L13.2983 7.11741C13.6717 7.47165 13.9237 7.95264 13.9853 8.49146L14.7457 10.0123C14.9095 9.62424 15 9.19769 15 8.75C15 7.029 13.6623 5.62043 11.97 5.50733C11.7272 3.53063 10.0423 2 8 2C5.95767 2 4.27283 3.53062 4.03004 5.50733C2.33769 5.62043 1 7.029 1 8.75C1 10.5449 2.45507 12 4.25 12H7.26744L7.76744 11H4.25C3.00736 11 2 9.99264 2 8.75C2 7.50736 3.00736 6.5 4.25 6.5H4.5C4.77614 6.5 5 6.27614 5 6Z"
                         Fill = "#3487C7" />
                        <Path Data = "M12.3931 7.55201L15.8931 14.552C15.9694 14.7044 16.0056 14.8738 15.9981 15.044C15.9906 15.2143 15.9397 15.3799 15.8502 15.5249C15.7607 15.67 15.6357 15.7898 15.4869 15.8729C15.3381 15.9561 15.1705 15.9998 15.0001 16H8.00006C7.8292 16.0007 7.66101 15.9576 7.51154 15.8748C7.36207 15.792 7.23631 15.6723 7.14625 15.5271C7.0562 15.3818 7.00486 15.216 6.99712 15.0453C6.98938 14.8746 7.02551 14.7048 7.10206 14.552L10.6021 7.55201C10.6849 7.38534 10.8126 7.24509 10.9708 7.14705C11.129 7.04901 11.3114 6.99707 11.4976 6.99707C11.6837 6.99707 11.8661 7.04901 12.0243 7.14705C12.1825 7.24509 12.3102 7.38534 12.3931 7.55201ZM12 12.495V9.495C12 9.36239 11.9473 9.23521 11.8536 9.14144C11.7598 9.04767 11.6326 8.995 11.5 8.995C11.3674 8.995 11.2402 9.04767 11.1464 9.14144C11.0527 9.23521 11 9.36239 11 9.495V12.495C11 12.6276 11.0527 12.7548 11.1464 12.8485C11.2402 12.9423 11.3674 12.995 11.5 12.995C11.6326 12.995 11.7598 12.9423 11.8536 12.8485C11.9473 12.7548 12 12.6276 12 12.495ZM11.2222 14.0843C11.3044 14.0293 11.4011 14 11.5 14C11.6326 14 11.7598 14.0527 11.8536 14.1464C11.9473 14.2402 12 14.3674 12 14.5C12 14.5989 11.9707 14.6956 11.9157 14.7778C11.8608 14.86 11.7827 14.9241 11.6913 14.9619C11.6 14.9998 11.4994 15.0097 11.4025 14.9904C11.3055 14.9711 11.2164 14.9235 11.1464 14.8535C11.0765 14.7836 11.0289 14.6945 11.0096 14.5975C10.9903 14.5006 11.0002 14.4 11.0381 14.3087C11.0759 14.2173 11.14 14.1392 11.2222 14.0843Z"
                         Fill = "#B27C00" />
                    </Canvas>
                </Viewbox>

Librería 2026 - Ejemplo DOS - Incluir en un botón directamente

        <Button x:Name = "ButtonBorrar03"
                    IsCancel = "False"
                    IsDefault = "False" 
                    IsEnabled = "True"
                    Height = "50" Width = "100">
            <Button.ToolTip>
                El icono de una nube, que indica conexión fallida
            </Button.ToolTip>
            <Button.Content>
                <Viewbox xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                    <Canvas Background = "Transparent" Width = "16" Height = "16">
                        <Path Data = "M5 6C5 4.34315 6.34315 3 8 3C9.65685 3 11 4.34315 11 6C11 6.02147 11.0014 6.04263 11.004 6.06339C11.1664 6.0215 11.3342 6 11.5035 6C11.8754 6 12.2399 6.10367 12.5561 6.29937C12.8723 6.49507 13.1276 6.77505 13.2935 7.10787L13.2983 7.11741C13.6717 7.47165 13.9237 7.95264 13.9853 8.49146L14.7457 10.0123C14.9095 9.62424 15 9.19769 15 8.75C15 7.029 13.6623 5.62043 11.97 5.50733C11.7272 3.53063 10.0423 2 8 2C5.95767 2 4.27283 3.53062 4.03004 5.50733C2.33769 5.62043 1 7.029 1 8.75C1 10.5449 2.45507 12 4.25 12H7.26744L7.76744 11H4.25C3.00736 11 2 9.99264 2 8.75C2 7.50736 3.00736 6.5 4.25 6.5H4.5C4.77614 6.5 5 6.27614 5 6Z"
                              Fill = "#3487C7" />
                        <Path Data = "M12.3931 7.55201L15.8931 14.552C15.9694 14.7044 16.0056 14.8738 15.9981 15.044C15.9906 15.2143 15.9397 15.3799 15.8502 15.5249C15.7607 15.67 15.6357 15.7898 15.4869 15.8729C15.3381 15.9561 15.1705 15.9998 15.0001 16H8.00006C7.8292 16.0007 7.66101 15.9576 7.51154 15.8748C7.36207 15.792 7.23631 15.6723 7.14625 15.5271C7.0562 15.3818 7.00486 15.216 6.99712 15.0453C6.98938 14.8746 7.02551 14.7048 7.10206 14.552L10.6021 7.55201C10.6849 7.38534 10.8126 7.24509 10.9708 7.14705C11.129 7.04901 11.3114 6.99707 11.4976 6.99707C11.6837 6.99707 11.8661 7.04901 12.0243 7.14705C12.1825 7.24509 12.3102 7.38534 12.3931 7.55201ZM12 12.495V9.495C12 9.36239 11.9473 9.23521 11.8536 9.14144C11.7598 9.04767 11.6326 8.995 11.5 8.995C11.3674 8.995 11.2402 9.04767 11.1464 9.14144C11.0527 9.23521 11 9.36239 11 9.495V12.495C11 12.6276 11.0527 12.7548 11.1464 12.8485C11.2402 12.9423 11.3674 12.995 11.5 12.995C11.6326 12.995 11.7598 12.9423 11.8536 12.8485C11.9473 12.7548 12 12.6276 12 12.495ZM11.2222 14.0843C11.3044 14.0293 11.4011 14 11.5 14C11.6326 14 11.7598 14.0527 11.8536 14.1464C11.9473 14.2402 12 14.3674 12 14.5C12 14.5989 11.9707 14.6956 11.9157 14.7778C11.8608 14.86 11.7827 14.9241 11.6913 14.9619C11.6 14.9998 11.4994 15.0097 11.4025 14.9904C11.3055 14.9711 11.2164 14.9235 11.1464 14.8535C11.0765 14.7836 11.0289 14.6945 11.0096 14.5975C10.9903 14.5006 11.0002 14.4 11.0381 14.3087C11.0759 14.2173 11.14 14.1392 11.2222 14.0843Z"
                              Fill = "#B27C00" />
                    </Canvas>
                </Viewbox>
                
            </Button.Content>
        </Button>

Librería 2026 – Ejemplo DOS - Incluirlo en Resources

Paso Uno trasformar el código

 <Canvas Background = "Transparent" Width = "16" Height = "16">
     <Path Data = "M5 6C5 Etc Etc" Fill = "#3487C7" />
     <Path Data = "M12.3931 7. Etc, Etc" Fill = "#B27C00" />
 </Canvas>

Paso dos

 <Canvas Background = "Transparent" Width = "16" Height = "16">
     <Path Fill = "#3487C7" Data = "M5 6C5 Etc Etc"  />
     <Path Fill = "#B27C00" Data = "M12.3931 7. Etc, Etc"  />
 </Canvas>

Paso tres

     <Path Fill = "#FF3487C7" Data = "M5 6C5 Etc Etc"  />
     <Path Fill = "#FFB27C00" Data = "M12.3931 7. Etc, Etc"  />

Paso cuatro

       <GeometryDrawing Brush = "#FF3487C7" Geometry = "M5 6C5 Etc Etc"  />
       <GeometryDrawing Brush = "#FFB27C00" Geometry = "M12.3931 7. Etc, Etc"  />

Paso cinco

    <Window.Resources>
        <DrawingImage x:Key = "CloudWarning23">
            <DrawingImage.Drawing>
                <DrawingGroup>
                  <GeometryDrawing Brush = "#FF3487C7" Geometry = "M5 6C5 Etc Etc"  />
                  <GeometryDrawing Brush = "#FFB27C00" Geometry = "M12.3931 7. Etc, Etc"  />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Resources>

El resultado Final

    <Window.Resources>
        <DrawingImage x:Key = "CloudWarning23">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush = "#FF3487C7" Geometry = "M5 6C5 4.34315 6.34315 3 8 3C9.65685 3 11 4.34315 11 6C11 6.02147 11.0014 6.04263 11.004 6.06339C11.1664 6.0215 11.3342 6 11.5035 6C11.8754 6 12.2399 6.10367 12.5561 6.29937C12.8723 6.49507 13.1276 6.77505 13.2935 7.10787L13.2983 7.11741C13.6717 7.47165 13.9237 7.95264 13.9853 8.49146L14.7457 10.0123C14.9095 9.62424 15 9.19769 15 8.75C15 7.029 13.6623 5.62043 11.97 5.50733C11.7272 3.53063 10.0423 2 8 2C5.95767 2 4.27283 3.53062 4.03004 5.50733C2.33769 5.62043 1 7.029 1 8.75C1 10.5449 2.45507 12 4.25 12H7.26744L7.76744 11H4.25C3.00736 11 2 9.99264 2 8.75C2 7.50736 3.00736 6.5 4.25 6.5H4.5C4.77614 6.5 5 6.27614 5 6Z" />
                    <GeometryDrawing Brush = "#FFB27C00" Geometry = "M12.3931 7.55201L15.8931 14.552C15.9694 14.7044 16.0056 14.8738 15.9981 15.044C15.9906 15.2143 15.9397 15.3799 15.8502 15.5249C15.7607 15.67 15.6357 15.7898 15.4869 15.8729C15.3381 15.9561 15.1705 15.9998 15.0001 16H8.00006C7.8292 16.0007 7.66101 15.9576 7.51154 15.8748C7.36207 15.792 7.23631 15.6723 7.14625 15.5271C7.0562 15.3818 7.00486 15.216 6.99712 15.0453C6.98938 14.8746 7.02551 14.7048 7.10206 14.552L10.6021 7.55201C10.6849 7.38534 10.8126 7.24509 10.9708 7.14705C11.129 7.04901 11.3114 6.99707 11.4976 6.99707C11.6837 6.99707 11.8661 7.04901 12.0243 7.14705C12.1825 7.24509 12.3102 7.38534 12.3931 7.55201ZM12 12.495V9.495C12 9.36239 11.9473 9.23521 11.8536 9.14144C11.7598 9.04767 11.6326 8.995 11.5 8.995C11.3674 8.995 11.2402 9.04767 11.1464 9.14144C11.0527 9.23521 11 9.36239 11 9.495V12.495C11 12.6276 11.0527 12.7548 11.1464 12.8485C11.2402 12.9423 11.3674 12.995 11.5 12.995C11.6326 12.995 11.7598 12.9423 11.8536 12.8485C11.9473 12.7548 12 12.6276 12 12.495ZM11.2222 14.0843C11.3044 14.0293 11.4011 14 11.5 14C11.6326 14 11.7598 14.0527 11.8536 14.1464C11.9473 14.2402 12 14.3674 12 14.5C12 14.5989 11.9707 14.6956 11.9157 14.7778C11.8608 14.86 11.7827 14.9241 11.6913 14.9619C11.6 14.9998 11.4994 15.0097 11.4025 14.9904C11.3055 14.9711 11.2164 14.9235 11.1464 14.8535C11.0765 14.7836 11.0289 14.6945 11.0096 14.5975C10.9903 14.5006 11.0002 14.4 11.0381 14.3087C11.0759 14.2173 11.14 14.1392 11.2222 14.0843Z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Resources>

Librería 2026 – Ejemplo DOS - Usar el icono de Resources en un botón

      <Button x:Name = "CloudWarning"
                    IsCancel = "False"
                    IsDefault = "False" 
                    IsEnabled = "True"
                    Height = "50" Width = "100">
            <Button.ToolTip>
                Una imagen de una  nube que representa una conexión
                    fallida con la nube,o algo así, es solo un ejemplo
                    de icono para mostrar en un botón, no tiene que tener
                    sentido ni nada, es solo para mostrar como usar un
                    icono SVG convertido a DrawingImage como I
                    mageSource de un Image dentro de un Button
            </Button.ToolTip>
            <Button.Content>
                <Image x:Name = "CloudWarningImage"
                           Source = "{StaticResource  CloudWarning23}"
                           Width = "32" Height = "32" VerticalAlignment = "Center"
                           Margin = "2,0,0,0" Visibility = "Visible"
                           ToolTip = "Hay conexión con internet"/>
            </Button.Content>
        </Button>

Librería 2022

Librería 2022 – Trasformar el código del icono

Para usar los iconos xaml de la librería del año 2022, hay que hacer un pequeño paso previo que es quitar los elementos [Resources] del icono porque dan problemas

Voy a mostrar los pasos a seguir, paso a paso, usando el Icono CloudWarning, del año 2022, el código Xaml copiado es el siguiente:

<Viewbox Width = "16 " Height = "16" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System = "clr-namespace:System;assembly = mscorlib">
  <Rectangle Width = "16 " Height = "16">
    <Rectangle.Resources>
      <SolidColorBrush x:Key = "canvas" Opacity = "0" />
      <SolidColorBrush x:Key = "light-lightblue-10" Color = "#0077a0" Opacity = "0.1" />
      <SolidColorBrush x:Key = "light-lightblue" Color = "#0077a0" Opacity = "1" />
      <SolidColorBrush x:Key = "light-yellow" Color = "#996f00" Opacity = "1" />
      <SolidColorBrush x:Key = "white" Color = "#ffffff" Opacity = "1" />
    </Rectangle.Resources>
    <Rectangle.Fill>
      <DrawingBrush Stretch = "None">
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <DrawingGroup x:Name = "canvas">
              <GeometryDrawing Brush = "{DynamicResource canvas}" Geometry = "F1M16,16H0V0H16Z" />
            </DrawingGroup>
            <DrawingGroup x:Name = "level_1">
              <GeometryDrawing Brush = "{DynamicResource light-lightblue-10}" Geometry = "F1M8.541,10.5H4.549a3.125,3.125,0,1,1,0-6.25,2.924,2.924,0,0,1,.8.109A3.493,3.493,0,0,1,11.925,6h.36A2.243,2.243,0,0,1,14,9.664L12.53,7H10.47Z" />
              <GeometryDrawing Brush = "{DynamicResource light-lightblue}" Geometry = "F1M8.266,11H4.548a3.626,3.626,0,0,1,0-7.25,3.48,3.48,0,0,1,.567.047A3.963,3.963,0,0,1,12.37,5.5a2.757,2.757,0,0,1,1.882,4.628l-.521-.946a1.7,1.7,0,0,0,.274-.929A1.735,1.735,0,0,0,12.287,6.5h-.859V6.064A3.037,3.037,0,0,0,8.417,3,3,3,0,0,0,5.609,4.989a2.51,2.51,0,0,0-1.061-.238,2.625,2.625,0,0,0,0,5.25H8.817Z" />
              <GeometryDrawing Brush = "{DynamicResource light-yellow}" Geometry = "F1M15.5,16h-8l-.439-.739,4-7.261h.878l4,7.261Z" />
              <GeometryDrawing Brush = "{DynamicResource white}" Geometry = "F1M12,13H11V10h1Zm.25,1.5a.75.75,0,1,1-.75-.75A.75.75,0,0,1,12.25,14.5Z" />
            </DrawingGroup>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Viewbox>

El primer paso es eliminar la etiqueta [Rectangle.Resources] Poniendo sus valores el los componentes [GeometryDrawing] que los usan

El primero:

 <SolidColorBrush x:Key = "canvas" Opacity = "0" />

que quiere decir que el color de fondo es ninguno y la opacidad es cero, es decir el color de fondo será #00000000, siendo trasparencia, rojo, verde, azul la correspondencia de los números HEXADECIMALIES

trasladamos este valor a :

<GeometryDrawing Brush = "#00000000"  Geometry = "F1M16,16H0V0H16Z" />

El segundo:

<SolidColorBrush x:Key = "light-lightblue-10" Color = "#0077a0" Opacity = "0.1" />

Opacity="0.1" significa el 01% de la opacidad total es decir de FF, usamos la calculadora para calcular el 1% de FF y el resultado es: 1 en hexadecimal

por lo que la etiqueta:

<GeometryDrawing Brush = "{DynamicResource light-lightblue-10}" Geometry = "F1M8.541,etc,etc" />

Quedará

<GeometryDrawing Brush = "#010077a0" Geometry = "F1M8.541,etc,etc",

El tercero:

 <SolidColorBrush x:Key = "light-lightblue" Color = "#0077a0" Opacity = "1" />

Opacity 1 significa totalmente opaco es decir el valor de trasparencia es de FF y el color quedara como: Color="#FF0077a0"

la etiqueta

<GeometryDrawing Brush = "{DynamicResource light-lightblue}" Geometry = "F1M8.266,etc,etc"

Quedará

<GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8.266,etc,etc" />

El cuarto

 <SolidColorBrush x:Key = "light-yellow" Color = "#996f00" Opacity = "1" />

El color quedara Color="#FF996f00". La etiqueta

<GeometryDrawing Brush = "{DynamicResource light-yellow}" Geometry = "F1M15.5,16h-8l-,etc,etc" />

Quedará

 <GeometryDrawing Brush = "#FF996f00" Geometry = 

El quinto

<SolidColorBrush x:Key = "white" Color = "#ffffff" Opacity = "1" />

Al ser Opacity 1 el valor hexadecimal es FF el color quedara Color="#FFffffff"

la etiqueta

<GeometryDrawing Brush = "{DynamicResource white}" Geometry = 

Quedará

<GeometryDrawing Brush = "#ffffffff" Geometry = 

Quitar la etiqueta [Rectangle]

Ahora podemos quietar todas las referencia a la etiqueta [Rectangle]

por lo que el código de nuestro icono quedará asi:

<Viewbox Width = "16" Height = "16"
          xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
     <Rectangle Width = "16" Height = "16">
          <Rectangle.Fill>
            <DrawingImage x:Key = "CloudWarning01">
                <DrawingImage.Drawing>
                    <DrawingBrush Stretch = "None">
                        <DrawingBrush.Drawing>
                            <DrawingGroup>
                                <DrawingGroup x:Name = "canvas">
                                              <GeometryDrawing Brush = "#00000000" Geometry = "F1M16,16H0V0H16Z" />
                                </DrawingGroup>
                                 <DrawingGroup x:Name = "level_1">
                                                 <GeometryDrawing Brush = "#010077a0" Geometry = "F1M8..5H4 Etc, ETC" />
                                                 <GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8.H4.5 Etc, ETC" />
                                                <GeometryDrawing Brush = "#FF996f00" Geometry = "F1M15-8l- Etc, ETC" />
                                                <GeometryDrawing Brush = "#ffffffff" Geometry = "F1M12V10h Etc, ETC" />
                                </DrawingGroup>
                            </DrawingGroup>
                         </DrawingBrush.Drawing>
                     </DrawingBrush>
                 </DrawingImage.Drawing>
            </DrawingImage>
       </Rectangle.Fill>
    </Rectangle>
</Viewbox>

Quitar la etiqueta [DrawingBrush]

A continuación quitaremos las etiquetas [DrawingBrush]

<Viewbox Width = "16" Height = "16"
          xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
     <Rectangle Width = "16" Height = "16">
          <Rectangle.Fill>
        <DrawingImage x:Key = "CloudWarning01">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <DrawingGroup x:Name = "canvas">
                        <GeometryDrawing Brush = "#00000000" Geometry = "F1M16,16H0V0H16Z" />
                    </DrawingGroup>
                    <DrawingGroup x:Name = "level_1">
                        <GeometryDrawing Brush = "#010077a0" Geometry = "F1M8. 4 Etc, ETC" />
                        <GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8..5 Etc, ETC" />
                        <GeometryDrawing Brush = "#FF996f00" Geometry = "F1M15l- Etc, ETC" />
                        <GeometryDrawing Brush = "#ffffffff" Geometry = "F1M120h Etc, ETC" />
                    </DrawingGroup>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
       </Rectangle.Fill>
    </Rectangle>
</Viewbox>

Simplificar etiquetas

Y después simplificamos las etiquetas, porque no tiene sentido que existan dos etiquetas con nombre [ DrawingGroup x:Name="canvas"] y [ DrawingGroup x:Name="level_1"]. Después de quitarlas el código quedará así:

      <DrawingImage x:Key = "CloudWarning01">
          <DrawingImage.Drawing>
                <DrawingGroup>
                  <GeometryDrawing Brush = "#00000000" Geometry = "F1M16,16H0V0H16Z" />
                  <GeometryDrawing Brush = "#010077a0" Geometry = "F1M8.541,10.5H4 Etc, ETC" />
                  <GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8.266,11H4.5 Etc, ETC" />
                  <GeometryDrawing Brush = "#FF996f00" Geometry = "F1M15.5,16h-8l- Etc, ETC" />
                  <GeometryDrawing Brush = "#ffffffff" Geometry = "F1M12,13H11V10h Etc, ETC" />
              </DrawingGroup>
          </DrawingImage.Drawing>
      </DrawingImage>

Resultado Final

para información: el código completo simplificado quedará así:

<Viewbox Width = "16" Height = "16"
          xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
     <Rectangle Width = "16" Height = "16">
          <Rectangle.Fill>
        <DrawingImage x:Key = "CloudWarning01">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush = "#00000000" Geometry = "F1M16,16H0V0H16Z" />
                    <GeometryDrawing Brush = "#010077a0" Geometry = "F1M8.541,10.5H4.549a3.125,3.125,0,1,1,0-6.25,2.924,2.924,0,0,1,.8.109A3.493,3.493,0,0,1,11.925,6h.36A2.243,2.243,0,0,1,14,9.664L12.53,7H10.47Z" />
                    <GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8.266,11H4.548a3.626,3.626,0,0,1,0-7.25,3.48,3.48,0,0,1,.567.047A3.963,3.963,0,0,1,12.37,5.5a2.757,2.757,0,0,1,1.882,4.628l-.521-.946a1.7,1.7,0,0,0,.274-.929A1.735,1.735,0,0,0,12.287,6.5h-.859V6.064A3.037,3.037,0,0,0,8.417,3,3,3,0,0,0,5.609,4.989a2.51,2.51,0,0,0-1.061-.238,2.625,2.625,0,0,0,0,5.25H8.817Z" />
                    <GeometryDrawing Brush = "#FF996f00" Geometry = "F1M15.5,16h-8l-.439-.739,4-7.261h.878l4,7.261Z" />
                    <GeometryDrawing Brush = "#ffffffff" Geometry = "F1M12,13H11V10h1Zm.25,1.5a.75.75,0,1,1-.75-.75A.75.75,0,0,1,12.25,14.5Z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
       </Rectangle.Fill>
    </Rectangle>
</Viewbox>

Librería 2022 – Usar el código en un botón

            <Button
               x:Name = "ButtonAceptar01"
               IsCancel = "False"
               IsDefault = "False"
               IsEnabled = "True" >
                </Button.ToolTip>
                    Aceptar  y ejecutar la operación
                </Button.ToolTip>
                  <Button.Content>
                    <StackPanel  Orientation = "Horizontal"  HorizontalAlignment = "Left" VerticalAlignment = "Center">
                        <Viewbox Width = "16" Height = "16" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                            <Rectangle Width = "16" Height = "16">
                                <Rectangle.Fill>
                                    <DrawingBrush>
                                        <DrawingBrush.Drawing>
                                            <DrawingGroup>
                                                <DrawingGroup.Children>
                                                    <GeometryDrawing Brush = "#00000000" Geometry = "F1M16,16H0V0H16Z" />
                                                    <GeometryDrawing Brush = "#010077a0" Geometry = "F1M8.541,10.5H4.549a3.125,3.125,0,1,1,0-6.25,2.924,2.924,0,0,1,.8.109A3.493,3.493,0,0,1,11.925,6h.36A2.243,2.243,0,0,1,14,9.664L12.53,7H10.47Z" />
                                                    <GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8.266,11H4.548a3.626,3.626,0,0,1,0-7.25,3.48,3.48,0,0,1,.567.047A3.963,3.963,0,0,1,12.37,5.5a2.757,2.757,0,0,1,1.882,4.628l-.521-.946a1.7,1.7,0,0,0,.274-.929A1.735,1.735,0,0,0,12.287,6.5h-.859V6.064A3.037,3.037,0,0,0,8.417,3,3,3,0,0,0,5.609,4.989a2.51,2.51,0,0,0-1.061-.238,2.625,2.625,0,0,0,0,5.25H8.817Z" />
                                                    <GeometryDrawing Brush = "#FF996f00" Geometry = "F1M15.5,16h-8l-.439-.739,4-7.261h.878l4,7.261Z" />
                                                    <GeometryDrawing Brush = "#ffffffff" Geometry = "F1M12,13H11V10h1Zm.25,1.5a.75.75,0,1,1-.75-.75A.75.75,0,0,1,12.25,14.5Z" />
                                                </DrawingGroup.Children>
                                            </DrawingGroup>
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Viewbox>
                        <Label  Content = "Aceptar"    />
                    </StackPanel>
                </Button.Content>
            </Button>

Librería 2022 – Incluir el código del icono en Resources

La forma de incluir el icono en Resources es la siguiente:

Observa que el contenido de la etiqueta [ DrawingGroup] no se modifica

Otra observación . Si se incluye en [ Resources] de una ventana, la imagen solo estará disponible para esa ventana. Sin embargo si se incluye en [Application] estará disponible para TODA la aplicación.

   <Window.Resources>
        <DrawingImage x:Key = "CloudWarning01">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush = "#00000000" Geometry = "F1M16,16H0V0H16Z" />
                    <GeometryDrawing Brush = "#020077a0" Geometry = "F1M8.541,10.5H4.549a3.125,3.125,0,1,1,0-6.25,2.924,2.924,0,0,1,.8.109A3.493,3.493,0,0,1,11.925,6h.36A2.243,2.243,0,0,1,14,9.664L12.53,7H10.47Z" />
                    <GeometryDrawing Brush = "#FF0077a0" Geometry = "F1M8.266,11H4.548a3.626,3.626,0,0,1,0-7.25,3.48,3.48,0,0,1,.567.047A3.963,3.963,0,0,1,12.37,5.5a2.757,2.757,0,0,1,1.882,4.628l-.521-.946a1.7,1.7,0,0,0,.274-.929A1.735,1.735,0,0,0,12.287,6.5h-.859V6.064A3.037,3.037,0,0,0,8.417,3,3,3,0,0,0,5.609,4.989a2.51,2.51,0,0,0-1.061-.238,2.625,2.625,0,0,0,0,5.25H8.817Z" />
                    <GeometryDrawing Brush = "#ff996f00" Geometry = "F1M15.5,16h-8l-.439-.739,4-7.261h.878l4,7.261Z" />
                    <GeometryDrawing Brush = "#ffffffff" Geometry = "F1M12,13H11V10h1Zm.25,1.5a.75.75,0,1,1-.75-.75A.75.75,0,0,1,12.25,14.5Z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Resources>

Librería 2022 – Usar el icono de Resources en un botón

Una vez que el icono esta definido en Resources, podemos usarlo para incluirlo en cualquier control, por ejemplo en un botón.

La clave del uso de este código esta en esta parte del código

                    <Image x:Name = "CloudWarningImage"
                           Source = "{StaticResource  CloudWarning01}"
                           Width = "32" Height = "32" VerticalAlignment = "Center"
                           Margin = "2,0,0,0" Visibility = "Visible"
                           ToolTip = "Hay conexión con internet"/>

El código completo del botón

            <Button x:Name = "CloudWarning"
                    IsCancel = "False"
                    IsDefault = "False" 
                    IsEnabled = "True"
                    Height = "50" Width = "100">
                 </Button.ToolTip>
                    Una imagen de una  nube que representa una conexión
                    fallida con la nube,o algo así, es solo un ejemplo
                    de icono para mostrar en un botón, no tiene que tener
                    sentido ni nada, es solo para mostrar como usar un
                    icono SVG convertido a DrawingImage como I
                    mageSource de un Image dentro de un Button
                </Button.ToolTip>
                  <Button.Content>
                    <Image x:Name = "CloudWarningImage"
                           Source = "{StaticResource  CloudWarning01}"
                           Width = "32" Height = "32" VerticalAlignment = "Center"
                           Margin = "2,0,0,0" Visibility = "Visible"
                           ToolTip = "Hay conexión con internet"/>
                </Button.Content>
            </Button>