SVG Symbols and Icon Sets

Template

<div class="icon-wrapper">
  <svg>
    <use href="icons.svg#icon-add"></use>
  </svg>
</div>

<svg class="icon">
  <use href="icons.svg#icon-add"></use>
</svg>

<svg><use href="icons.svg#icon-add"></use></svg>

Use flex: 0 0 auto as a shorthand for flex-grow: 0, flex-shrink: 0 andflex-basis: auto. The effect is to enforce fixed size for .icon-wrapper in flex containers

.icon-wrapper {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;
  flex: 0 0 auto;
  user-select: none;
  cursor: pointer;
  background-color: transparent;
}

.icon-wrapper svg {
  width: 100%;
  height: 100%;
  fill: red;
  background-color: transparent;
}

.icon {
  width: 100%;
  height: 100%;
  fill: red;
  background-color: transparent;
}

.icon-wrapper:hover {
  background-color: purple;
}

Circle

.icon-wrapper {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;
  flex: 0 0 auto;
  user-select: none;
  cursor: pointer;
  border-radius: 50%;
  background-color: green;
}

Use fill: currentColor to make an SVG element match its fill to the color attribute of its parent (the font colour)

Miscellaneous

• Consider using a span as the wrapper, to help if the icon wants to be inline with text

document.body.classList.add('classname') or document.body.classList.toggle('classname') for body toggles, which could influence global styling if you have styles like

.hide-button-labels .button span {
  display: none;
}

Toggling hide-button-labels class on body defines whether or not all span elements in .button classed elements are shown or hidden

border-bottom: 2px solid currentColor; - currentColor is so useful for things