Add icons to device config dashboard (#14184)

* Add icons to device config dashboard

* Add `alt=""`

src/components/data-table/ha-data-table.ts

@@ -724,6 +724,11 @@ export class HaDataTable extends LitElement {
           width: 54px;
         }
 
+        .mdc-data-table__cell--icon img {
+          width: 24px;
+          height: 24px;
+        }
+
         .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
           text-align: center;
         }
@@ -740,6 +745,7 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child img,
         .mdc-data-table__cell--icon:first-child ha-state-icon,
         .mdc-data-table__cell--icon:first-child ha-svg-icon {
           margin-left: 8px;
@@ -748,7 +754,12 @@ export class HaDataTable extends LitElement {
         :host([dir="rtl"])
           .mdc-data-table__cell--icon:first-child
           ha-state-icon,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon {
+        :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          ha-svg-icon
+          :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          img {
           margin-left: auto;
           margin-right: 8px;
         }

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -35,6 +35,7 @@ import { domainToName } from "../../../data/integration";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
@@ -215,6 +216,9 @@ export class HaConfigDeviceDashboard extends LitElement {
           : this.hass.localize(
               "ui.panel.config.devices.data_table.no_integration"
             ),
+        domains: device.config_entries
+          .filter((entId) => entId in entryLookup)
+          .map((entId) => entryLookup[entId].domain),
         battery_entity: [
           this._batteryEntity(device.id, deviceEntityLookup),
           this._batteryChargingEntity(device.id, deviceEntityLookup),
@@ -235,9 +239,27 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   private _columns = memoizeOne(
     (narrow: boolean, showDisabled: boolean): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer = narrow
+      const columns: DataTableColumnContainer = {
-        ? {
+        icon: {
-            name: {
+          title: "",
+          type: "icon",
+          template: (_icon, device) =>
+            device.domains.length
+              ? html`<img
+                  alt=""
+                  referrerpolicy="no-referrer"
+                  src=${brandsUrl({
+                    domain: device.domains[0],
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                />`
+              : "",
+        },
+      };
+
+      if (narrow) {
+        columns.name = {
           title: this.hass.localize(
             "ui.panel.config.devices.data_table.device"
           ),
@@ -248,14 +270,11 @@ export class HaConfigDeviceDashboard extends LitElement {
           grows: true,
           template: (name, device: DataTableRowData) => html`
             ${name}
-                <div class="secondary">
+            <div class="secondary">${device.area} | ${device.integration}</div>
-                  ${device.area} | ${device.integration}
-                </div>
           `,
-            },
+        };
-          }
+      } else {
-        : {
+        columns.name = {
-            name: {
           title: this.hass.localize(
             "ui.panel.config.devices.data_table.device"
           ),
@@ -264,8 +283,8 @@ export class HaConfigDeviceDashboard extends LitElement {
           filterable: true,
           grows: true,
           direction: "asc",
-            },
         };
+      }
 
       columns.manufacturer = {
         title: this.hass.localize(