Use a different icon for tables on the homepage (#22445)

frontend/src/metabase/entities/popular-items.js

@@ -13,7 +13,8 @@ export const getName = item => {
 
 export const getIcon = item => {
   const entity = getEntity(item);
-  return entity.objectSelectors.getIcon(item.model_object);
+  const options = { variant: "secondary" };
+  return entity.objectSelectors.getIcon(item.model_object, options);
 };
 
 const PopularItems = createEntity({

frontend/src/metabase/entities/recent-items.js

@@ -13,7 +13,8 @@ export const getName = item => {
 
 export const getIcon = item => {
   const entity = getEntity(item);
-  return entity.objectSelectors.getIcon(item.model_object);
+  const options = { variant: "secondary" };
+  return entity.objectSelectors.getIcon(item.model_object, options);
 };
 
 const RecentItems = createEntity({

frontend/src/metabase/entities/tables.js

@@ -228,7 +228,9 @@ const Tables = createEntity({
   objectSelectors: {
     getUrl: table =>
       Urls.tableRowsQuery(table.database_id, table.table_id, null),
-    getIcon: table => ({ name: "table" }),
+    getIcon: (table, { variant = "primary" } = {}) => ({
+      name: variant === "primary" ? "table" : "database",
+    }),
     getColor: table => color("accent2"),
   },