Add padding to room header icon (#29271)

* Add padding to room header icon

* Add screenshot tests for room header icon

* Add type to visibility import

* Use visibility type

* lint

playwright/e2e/room/room-header.spec.ts

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
+import { type Visibility } from "matrix-js-sdk/src/matrix";
 
 import { test, expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -85,6 +86,15 @@ test.describe("Room Header", () => {
                 await expect(header).toMatchScreenshot("room-header-long-name.png");
             },
         );
+
+        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
+            await app.viewRoomByName("Test Room");
+
+            const header = page.locator(".mx_RoomHeader");
+
+            await expect(header).toMatchScreenshot("room-header-with-icon.png");
+        });
     });
 
     test.describe("with a video room", () => {

res/css/views/rooms/_RoomHeader.pcss

@@ -59,6 +59,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomHeader_icon {
     flex-shrink: 0;
+    padding: var(--cpd-space-1x);
 }
 
 .mx_RoomHeader .mx_FacePile {