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

Html – Apply class to svg inside a div

My code is shown below. However, nothing is applied to the svg. What is the best way to resolve this?

enter image description here

.icon {
    width: 250px;
    height: 250px;
    background-color: chartreuse;
}

.icon > svg {
    fill: brown;
    width: 100%;
    height: 100%;
}
Tags:

2

Answers


  1. 0

    Remove the inline style fill="none", width="37" and height="36" from svg.

    Login or Signup to reply.
  2. 0

    A trick I use is to give a color property to the parent element, in this case .icon and have the svg css as fill: currentColor

    .icon {
  color: brown;
  /* Rest of your code */
}

.icon > svg {
  fill: currentColor;
  /* Rest of your code */
}

    More details here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search