GitLab

In order to support opaque ripples for cr-icon-button, the instances
that used the background-image CSS property to specify the icon were
changed to use --cr-icon-image. The reason is the mask-image property
is being used instead inside cr-icon-button to allow the icon color
to be easily changed as needed using CSS.

The colors that were specified in the original SVG files need to now
be specified in CSS using the --cr-icon-button-color CSS variable.

This does not work for the camera-shutter-icon and
videocan-shutter-icon which have two colors: one for the fill and one
for the stroke. The mask-image approach is not able to accommodate
more than one color. For this reason, the icons used in cr-camera
were changed to use iron-icon which is also support by
cr-icon-button.

In order to support icons that have different stroke and fill colors
the following CSS variables have been added. The *-focus-* variables
are for when the ripple is showing.

--cr-icon-button-fill-color
--cr-icon-button-focus-fill-color
--cr-icon-button-focus-stroke-color
--cr-icon-button-stroke-color

These new variables are to be used in place of the existing CSS
variables --cr-icon-button-color and --cr-icon-button-focus-color.

Bug: 1022752
Change-Id: I0a010e500186e029ca71445f200d4606312deb7b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1906962
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#715060}