Add a hovering effect on an element with masked or backround SVG Icon-CodePudding

How do I add an hovering effect on an element that serves as an SVG Icon that can also change the color of the icon itself.

This is what I have right now, two option, using a mask image or display the icon as background.

The problem using background in CSS, the display is correct when hovering but I can't change the icon color.

.icon {
    display: inline-block;
    background: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') no-repeat center; /* imagine the file here as an SVG file */
    background-size: 100px 100px !important;
    height: 100px;
    width: 100px;
}

.icon_interactive:hover {
    cursor: pointer;
    background-color: white;
    border-radius: 50%;
    padding: 25px;
}

<div style="padding: 100px; background-color: gray; text-align: center;">
  <span ></span>
</div>

The problem using mask-image in CSS, the display is incorrect when hovering but I can change the icon color.

.icon {
    -webkit-mask: url('https://cdn-icons-png.flaticon.com/512/151/151773.png');
    -webkit-mask-size: cover !important;
    mask-image: url('https://cdn-icons-png.flaticon.com/512/151/151773.png');
    mask-size: cover !important;
    display: inline-block;
    background-color: black;
    height: 100px;
    width: 100px;
}

.icon_interactive:hover {
    cursor: pointer;
    background-color: white;
    border-radius: 50%;
    padding: 25px;
}

<div style="padding: 100px; background-color: gray; text-align: center;">
  <span ></span>
</div>

What I want to create is an interactive icon when hovering that you can change the color of the icon itself.

CodePudding user response：

Consider pseudo element to combine both tricks:

.icon {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  padding: 25px;
}

.icon:before {
  content: "";
  display: block;
  height:100%;
  background: #000;
  -webkit-mask: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') center/100px 100px no-repeat;
}

.icon_interactive:hover {
  cursor: pointer;
  background-color: white;
}
.icon_interactive:hover::before {
  background:red;
}

body {
  background:gray;
}

<span ></span>