Html Question posted in
Some basic documentation can be found here.

Html – Given this icon: `<span class="material-symbols-outlined"> check_circle </span>` ,on hover, how do i make only the inside of the icon green?

i’m trying to make the background color of the icon green without it going over the circular shape of the icon

i’ve been trying to match the html element’s border to the icon’s shape, but the element’s border is always slightly bigger, even with no padding

Tags:

2

Answers


  1. 0

    Here’s an example. It seems like 80% of the icon radius is enough for most cases. You can play with the percent if you want. It’s best to check on different browsers.

    var container = document.querySelector(".container")
for (var i = 10; i < 150; i++) {
  var span = document.createElement("span")
  span.style.fontSize = i + "px"
  span.classList.add("material-symbols-outlined")
  span.innerHTML = "check_circle"
  container.append(span)
}
    .material-symbols-outlined {
  position: relative;
  cursor: default;
}

.material-symbols-outlined:hover::before {
  background: lightgreen;
  border-radius: 100%;
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  z-index: -1;
  content: '';
}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<div class="container"></div>
    Login or Signup to reply.
  2. 0

    Results can be achieved by simply adding ":hover" property to "material-symbols-outlined" & if you want to added uniquely to certain icons added unique class to them and add ":hover".

    Try below code and feel free to modify, cheers.

    .material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


.material-symbols-outlined:hover {
  background-color: lightgreen;
  border-radius: 50px;
  cursor: pointer;
}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<span class="material-symbols-outlined"> check_circle </span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search