[pdm-devel] [PATCH proxmox-datacenter-manager 4/5] ui: images: add sdn icon

Tue Sep 9 15:16:32 CEST 2025

while this is good enough for now imho

we should really think about creating our own font with the missing
icons, or think about changing to an iconset that includes the ones we
need/want. The approach here fixes the color issue, but we still
have a scaling problem, as in, the svg does not scale with the
set font-size, like the rest of the font-awesome icons.

This is ok for the uses we have now, but might not always work out
(e.g. the font-size in panel headers is 20px for desktop and
14px for crisp, so the 16px here sit somewhere in between, so it
does not stand out that much)

On 9/9/25 12:08 PM, Stefan Hanreich wrote:
> Add the icon used for SDN in Proxmox VE manually, since it isn't
> included in our distribution of font awesome. SVG icons have the issue
> that their color cannot be simply changed via the CSS color
> attribute. This is problematic when showing an icon in the navigation
> or on the dashboard, where we use the color attribute to change their
> color. To work around that, use the icon as a mask and fill the
> background with the desired color. In the future it would make sense
> to ship our own custom font with those icons to circumvent those
> issues completely.
> 
> Signed-off-by: Stefan Hanreich <s.hanreich at proxmox.com>
> ---
>   ui/Makefile            |  1 +
>   ui/css/pdm.scss        | 27 ++++++++++++++--
>   ui/images/icon-sdn.svg | 70 ++++++++++++++++++++++++++++++++++++++++++
>   3 files changed, 95 insertions(+), 3 deletions(-)
>   create mode 100644 ui/images/icon-sdn.svg
> 
> diff --git a/ui/Makefile b/ui/Makefile
> index 7d2e654..61e5c77 100644
> --- a/ui/Makefile
> +++ b/ui/Makefile
> @@ -60,6 +60,7 @@ install: $(COMPILED_OUTPUT) index.hbs
>   	install -m0644 images/icon-cpu.svg $(DESTDIR)$(UIDIR)/images
>   	install -m0644 images/icon-memory.svg $(DESTDIR)$(UIDIR)/images
>   	install -m0644 images/icon-sdn-vnet.svg $(DESTDIR)$(UIDIR)/images
> +	install -m0644 images/icon-sdn.svg $(DESTDIR)$(UIDIR)/images
>   	install -m0644 images/proxmox_logo.svg $(DESTDIR)$(UIDIR)/images
>   	install -m0644 images/proxmox_logo_white.svg $(DESTDIR)$(UIDIR)/images
>   
> diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss
> index 6d87b1c..63095c3 100644
> --- a/ui/css/pdm.scss
> +++ b/ui/css/pdm.scss
> @@ -59,15 +59,36 @@
>   
>   .fa-sdn-vnet::before {
>       content: " ";
> -    background-image: url(./images/icon-sdn-vnet.svg);
> -    background-size: 16px 16px;
> -    background-repeat: no-repeat;
> +    mask-image: url(./images/icon-sdn-vnet.svg);
> +    mask-size: 16px 16px;
> +    mask-repeat: no-repeat;
> +    background-color: var(--pwt-color);
>       width: 16px;
>       height: 16px;
>       vertical-align: bottom;
>       display: inline-block;
>   }
>   
> +.fa-sdn:before {
> +    content: " ";
> +    mask-image: url(../images/icon-sdn.svg);
> +    mask-size: 16px 16px;
> +    mask-repeat: no-repeat;
> +    background-color: var(--pwt-color);
> +    width: 16px;
> +    height: 16px;
> +    vertical-align: middle;
> +    display: inline-block;
> +}
> +
> +.pwt-nav-menu .pwt-nav-link.active .fa-sdn:before {
> +    background-color: var(--pwt-accent-color);
> +}
> +
> +.pwt-panel-header-text .fa-sdn:before {
> +    background-color: var(--pwt-accent-color-background);
> +}
> +
>   :root.pwt-dark-mode {
>       .fa-memory,
>       .fa-cpu,
> diff --git a/ui/images/icon-sdn.svg b/ui/images/icon-sdn.svg
> new file mode 100644
> index 0000000..9782e8b
> --- /dev/null
> +++ b/ui/images/icon-sdn.svg
> @@ -0,0 +1,70 @@
> +<?xml version="1.0" encoding="UTF-8" standalone="no"?>
> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> +<!-- Generated by graphviz version 2.40.1 (20161225.0304)
> + -->
> +<!-- Title: sdn Pages: 1 -->
> +<svg width="142pt" height="140pt"
> + viewBox="0.00 0.00 142.00 140.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
> +    <style type="text/css">
> +        .filled { fill: #000; stroke: #000; }
> +    </style>
> +<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 136)">
> +<title>sdn</title>
> +<!-- a -->
> +<g id="node1" class="filled">
> +<title>a</title>
> +<ellipse cx="64.9158" cy="-69.1316" rx="18" ry="18"/>
> +</g>
> +<!-- b -->
> +<g id="node2" class="filled">
> +<title>b</title>
> +<ellipse cx="116.0453" cy="-37.947" rx="18" ry="18"/>
> +</g>
> +<!-- a--b -->
> +<g id="edge1" class="filled">
> +<title>a--b</title>
> +<path stroke-width="6" d="M80.5342,-59.6057C86.8776,-55.7368 94.189,-51.2775 100.5226,-47.4145"/>
> +</g>
> +<!-- d -->
> +<g id="node3" class="filled">
> +<title>d</title>
> +<ellipse cx="65.7782" cy="-17.6758" rx="18" ry="18"/>
> +</g>
> +<!-- a--d -->
> +<g id="edge5" class="filled">
> +<title>a--d</title>
> +<path stroke-width="6" d="M65.2223,-50.8453C65.3036,-45.9924 65.3914,-40.753 65.4727,-35.9032"/>
> +</g>
> +<!-- c -->
> +<g id="node4" class="filled">
> +<title>c</title>
> +<ellipse cx="17.954" cy="-50.8477" rx="18" ry="18"/>
> +</g>
> +<!-- a--c -->
> +<g id="edge3" class="filled">
> +<title>a--c</title>
> +<path stroke-width="6" d="M47.9615,-62.5307C43.7579,-60.8941 39.2511,-59.1394 35.0411,-57.5003"/>
> +</g>
> +<!-- e -->
> +<g id="node5" class="filled">
> +<title>e</title>
> +<ellipse cx="101.4409" cy="-114.0579" rx="18" ry="18"/>
> +</g>
> +<!-- a--e -->
> +<g id="edge6" class="filled">
> +<title>a--e</title>
> +<path stroke-width="6" d="M76.4726,-83.3466C80.8198,-88.6936 85.7556,-94.7648 90.0844,-100.0892"/>
> +</g>
> +<!-- b--d -->
> +<g id="edge2" class="filled">
> +<title>b--d</title>
> +<path stroke-width="6" d="M99.3071,-31.197C93.9378,-29.0318 87.991,-26.6336 82.6147,-24.4655"/>
> +</g>
> +<!-- c--d -->
> +<g id="edge4" class="filled">
> +<title>c--d</title>
> +<path stroke-width="6" d="M32.8237,-40.5338C38.527,-36.5778 45.0352,-32.0636 50.7529,-28.0977"/>
> +</g>
> +</g>
> +</svg>