=== Description
Our icon buttons & links are not currently consistent with each other, and are not following the design style guide spec. We need to update the color of the icons, the total size (i.e. hover area), and the hover color.
We're working on updates as part of a new feature:
https://en.wikipedia.beta.wmflabs.org/wiki/User:JDrewniak?vectorvisualenhancementnext=1
To update:
{F35419518 width=700}
=== Design spec
{F35456202 width=700}
=== Prototype
https://di-collapsible-menus.web.app/Moss
== Sequencing
== Without feature flag
[] We'll update colors of mw-ui-icon (T317800)
[] We'll update Echo with minor changes to allow us to make Echo consistent with other icons inside our feature flag (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/832380, https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/832382 and https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/832370)
== Behind feature flag
[] We'll make Echo consistent with our other icons (https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/832381 and https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/832378)
[] Align Echo tray and bell icon with other icons
[] Add margin of 8px to all buttons in sticky header and user menu
[] Update user menu dropdown arrow icon positioning
[] The TOC collapsed icon has some rules that override mw-ui-icon defaults. We'll fix #vector-toc-collapsed-button to not do that.
[] Review Popups setting cog
== After feature flag is enabled
[] Update mw-ui-icon spec with design systems team regarding touch areas: Change small icons padding from 9px to 6px (see https://phabricator.wikimedia.org/T234990#8229081) https://gerrit.wikimedia.org/r/832328
== QA
[] Verify that the columns in https://doc.wikimedia.org/mediawiki-skins-Vector/master/js/ui/?path=/story/icon-and-buttons--button show identical button/icons
== Sign off step
[] Make a task for deploying vectorvisualenhancementnext feature.