Updated design for integration icons

[MindFreeze]

Proposed change

Should be merged after #22295

Changes:

1. Remove backgrounds from icons and change to 24px which is a minimum standard for icons REASONS:
   Background could indicate it is clickable and have some functionality behind it.
   Current icon in a background is only 16px which is difficult to see.

2. Change mdi:cloud icon to mdi:web and change copy to “Depends on Internet connection”
REASONS:
   There are reports that users think it’s related to the HA Cloud or other “clouds”

3. Change the “cloud” integration color to --label-badge-gray
REASONS:
   Blue is reserved as a primary (brand/theme) action color and this icon isn’t a link
   Gray is a neutral color that indicates secondary information on this screen
   Add new color --error-color for “custom” integration if it overwrites a core one

4. Apply the same changes to the

5. Align the design of the “Needs manual configuration” icon in the the to be the same as on the integrations grid.
 copy: “This integration cannot be setup from the UI”
   

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io