Icon size greater that font in hyprland window module

[vincentDcmps]

hello, when I go to some website with icon in title they are printed larger than text font in waybar does somebody meet this issue too or maybe this is a configuration issue from my side

config.jsonc

// -*- mode: jsonc -*-
{
    // "layer": "top", // Waybar at top layer
    // "position": "bottom", // Waybar position (top|bottom|left|right)
    "height": 31, // Waybar height (to be removed for auto height)
    // "width": 1280, // Waybar width
    "spacing": 4, // Gaps between modules (4px)
    // Choose the order of the modules
    "modules-left": [
      "hyprland/workspaces",
        "hyprland/submap",
        "mpris",
        "custom/updates"
    ],
    "modules-center": [
        "hyprland/window"
    ],
    "modules-right": [
        "idle_inhibitor",
        "pulseaudio",
        "network",
        "cpu",
        "memory",
        "temperature",
        "backlight",
        "keyboard-state",
        "battery",
        "battery#bat2",
        "clock",
        "tray",
        "custom/power"
    ],
    // Modules configuration
    // "sway/workspaces": {
    //     "disable-scroll": true,
    //     "all-outputs": true,
    //     "warp-on-scroll": false,
    //     "format": "{name}: {icon}",
    //     "format-icons": {
    //         "1": "",
    //         "2": "",
    //         "3": "",
    //         "4": "",
    //         "5": "",
    //         "urgent": "",
    //         "focused": "",
    //         "default": ""
    //     }
    // },
    "keyboard-state": {
        "numlock": true,
        "capslock": true,
        "format": "{name} {icon}",
        "format-icons": {
            "locked": "",
            "unlocked": ""
        }
    },
    "hyprland/submap": {
        "format": "<span style=\"italic\">{}</span>"
    },
    "sway/scratchpad": {
        "format": "{icon} {count}",
        "show-empty": false,
        "format-icons": ["", ""],
        "tooltip": true,
        "tooltip-format": "{app}: {title}"
    },
    "hyprland/window": {
        "rewrite": {
            "(.*) – Chromium": "$1"
        },
        "separate-outputs": true,
        "icon": true,
        "icon-size" :16
    },
    "mpris": {
      "format": "{player_icon} {dynamic}",
      "format-paused": "{status_icon} <i>{dynamic}</i>",
      "player-icons": {
        "default": "▶",
        "mpv": "\uf03d",
        "mpd": "🎵",
        "firefox": "\uf269"
      },
      "status-icons": {
        "paused": "⏸"
      }
      // "ignored-players": ["firefox"]
    },
    "idle_inhibitor": {
        "format": "{icon}",
        "format-icons": {
            "activated": "",
            "deactivated": ""
        }
    },
    "tray": {
        "spacing": 10
    },
    "clock": {
        // "timezone": "America/New_York",
        "tooltip-format": "<tt><small>{calendar}</small></tt>",
        "format-alt": "{:%Y-%m-%d}",
        "calendar": {
            "mode"          : "months",
            "mode-mon-col"  : 3,
            "weeks-pos"     : "right",
            "on-scroll"     : 1,
            "format": {
                      "months":     "<span color='#ffead3'><b>{}</b></span>",
                      "days":       "<span color='#ecc6d9'><b>{}</b></span>",
                      "weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
                      "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                      "today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
                      }
            },
        "actions":  {
            "on-click-right": "mode",
            "on-scroll-up": "tz_up",
            "on-scroll-down": "tz_down",
            "on-scroll-up": "shift_up",
            "on-scroll-down": "shift_down"
        }
    },
    "cpu": {
    "interval": 5,
    "format": "{usage}% {icon0}{icon1}{icon2}{icon3}",
     "format-icons": [
          "<span color='#69ff94'>▁</span>", // green
          "<span color='#2aa9ff'>▂</span>", // blue
          "<span color='#f8f8f2'>▃</span>", // white
          "<span color='#f8f8f2'>▄</span>", // white
          "<span color='#ffffa5'>▅</span>", // yellow
          "<span color='#ffffa5'>▆</span>", // yellow
          "<span color='#ff9977'>▇</span>", // orange
          "<span color='#dd532e'>█</span>"  // red
     ],

        "tooltip": true,
    },
    "memory": {
        "format": "{}% "
    },
    "temperature": {
        // "thermal-zone": 2,
        // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
        "critical-threshold": 80,
        // "format-critical": "{temperatureC}°C {icon}",
        "format": "{temperatureC}°C {icon}",
        "format-icons": ["", "", ""]
    },
    "backlight": {
        // "device": "acpi_video1",
        "format": "{percent}% {icon}",
        "format-icons": ["", "", "", "", "", "", "", "", ""]
    },
    "battery": {
        "states": {
            // "good": 95,
            "warning": 30,
            "critical": 15
        },
        "format": "{capacity}% {icon}",
        "format-full": "{capacity}% {icon}",
        "format-charging": "{capacity}% ",
        "format-plugged": "{capacity}% ",
        "format-alt": "{time} {icon}",
        // "format-good": "", // An empty format will hide the module
        // "format-full": "",
        "format-icons": ["", "", "", "", ""]
    },
    "battery#bat2": {
        "bat": "BAT2"
    },
    "power-profiles-daemon": {
      "format": "{icon}",
      "tooltip-format": "Power profile: {profile}\nDriver: {driver}",
      "tooltip": true,
      "format-icons": {
        "default": "",
        "performance": "",
        "balanced": "",
        "power-saver": ""
      }
    },
    "network": {
        // "interface": "wlp2*", // (Optional) To force the use of this interface
        "interval": 5,
        "format-wifi": "{essid} ({signalStrength}%) ",
        "format-ethernet": " {bandwidthUpOctets} \uf093 {bandwidthDownOctets} \uf019",
        "tooltip-format": "{ifname} via {gwaddr} ",
        "format-linked": "{ifname} (No IP) ",
        "format-disconnected": "Disconnected ⚠",
        "format-alt": "{ifname}: {ipaddr}/{cidr}"
    },
    "pulseaudio": {
        // "scroll-step": 1, // %, can be a float
        "format": "{volume}% {icon} {format_source}",
        "format-bluetooth": "{volume}% {icon} {format_source}",
        "format-bluetooth-muted": " {icon} {format_source}",
        "format-muted": " {format_source}",
        "format-source": "{volume}% ",
        "format-source-muted": "",
        "format-icons": {
            "headphone": "",
            "hands-free": "",
            "headset": "",
            "phone": "",
            "portable": "",
            "car": "",
            "default": ["", "", ""]
        },
        "on-click": "pavucontrol"
    },
    "custom/media": {
        "format": "{icon} {}",
        "return-type": "json",
        "max-length": 40,
        "format-icons": {
            "spotify": "",
            "default": "🎜"
        },
        "escape": true,
        "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
        // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
    },
    "custom/power": {
        "format" : "⏻ ",
		"tooltip": false,
		"menu": "on-click",
		"menu-file": "$HOME/.config/waybar/power_menu.xml", // Menu file in resources folder
		"menu-actions": {
			"shutdown": "shutdown",
			"reboot": "reboot",
			"suspend": "systemctl suspend",
			"hibernate": "systemctl hibernate"
		}
    },
    "custom/updates": {
    "format": "{} {icon}",
    "return-type": "json",
    "format-icons": {
        "has-updates": "\uf021",
        "updated": "\uf132"
    },
    "exec-if": "which waybar-module-pacman-updates",
    "exec": "waybar-module-pacman-updates --interval-seconds 5 --network-interval-seconds 300",
    "on-click": "kitty -e yay",
    "tray": {
        // "icon-size": 21,
        "spacing": 10
    }
}
}

style.css

* {
    border: none;
    /* `ttf-font-awesome` is required to be installed for icons */
    font-family: "Cascadia Code", Helvetica, Arial, sans-serif, FontAwesome,"Noto Sans Mono";

    /* adjust font-size value to your liking: */
    font-size: 14px;
    min-height: 0;
}

window#waybar {
    background-color: rgba(0, 0, 0, 0.9);
    /* border-bottom: 3px solid rgba(100, 114, 125, 0.5); */
    color: #ffffff;
    /* transition-property: background-color; */
    /* transition-duration: .5s; */
    /* border-radius: 0; */
}

menu,
tooltip {
  border-radius: 8px;
  padding: 2px;
  /* border: 1px solid ; */
  background: rgba(0, 0, 0, 0.8);

  color: #ffffff;
}

/* window#waybar.hidden {
    opacity: 0.2;
} */

/*
window#waybar.empty {
    background-color: transparent;
}
window#waybar.solo {
    background-color: #FFFFFF;
}
*/

/* window#waybar.termite {
    background-color: #000000;
}

window#waybar.chromium {
    background-color: #000000;
    border: none;
} */

#workspaces button {
    /* padding: 0 0.4em; */
    /* background-color: transparent; */
    color: #ffffff;
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
#workspaces button:hover {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 -3px #ffffff;
}

#workspaces button.active {
    background-color: #64727D;
    /* box-shadow: inset 0 -3px #ffffff; */
}

#workspaces button.urgent {
    background-color: #eb4d4b;
}

#submap {
    background-color: #64727D;
    /* border-bottom: 3px solid #ffffff; */
}

#clock,
#battery,
#cpu,
#memory,
#temperature,
#backlight,
#network,
#pulseaudio,
#custom-media,
#custom-updates,
#tray,
#mode,
#idle_inhibitor,
#mpd {
    padding: 0 10px;
    margin: 6px 3px; 
    color: #000000;
}

#window,
#workspaces {
    margin: 0 4px;
    margin-top: -49px;
    margin-bottom: -49px;
}

/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}

#clock {
    color: white;
}

#battery {
    color: white;
}

#battery.charging {
    color: #ffffff;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

#battery.critical:not(.charging) {
    background-color: #f53c3c;
    color: #ffffff;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

label:focus {
    background-color: #000000;
}

#cpu {
    color: #ffffff;
}

#memory {
    color: white;
}

#backlight {
    color:white;
}

#network {
    color:white;

}

#network.disconnected {
    background-color: #f53c3c;
}

#pulseaudio {
    color: #ffffff;
}

#pulseaudio.muted {
    color: #ffffff;
}

#custom-media {
    background-color: #66cc99;
    color: #2a5c45;
    min-width: 100px;
}

#custom-media.custom-spotify {
    background-color: #66cc99;
}

#custom-media.custom-vlc {
    background-color: #ffa000;
}

#custom-updates {
  color: #ffffff;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
#custom-updates.pending-updates {
	animation-name: blink-update;
	animation-duration: 3s;
}

#temperature {
    background-color: #f0932b;
}

#temperature.critical {
    background-color: #eb4d4b;
}

#tray {
    background-color: #2980b9;
}

#idle_inhibitor {
    background-color: #2d3436;
}

#idle_inhibitor.activated {
    background-color: #ecf0f1;
    color: #2d3436;
}

#mpd {
    background-color: #66cc99;
    color: #2a5c45;
}

#mpd.disconnected {
    background-color: #f53c3c;
}

#mpd.stopped {
    background-color: #90b1b1;
}

#mpd.paused {
    background-color: #51a37a;
}

#language {
    background: #bbccdd;
    color: #333333;
    padding: 0 5px;
    margin: 6px 3px;
    min-width: 16px;
}