:host { display: inline-block; position: relative; }


.comp-scu-icon {
  width: 24px; height: 24px;
  --svg-color: var( --color-icon-color );
}



#iconSvg {
  width: 100%;
  height: 100%;
  fill: var( --svg-color );
  & * {
    fill: var( --svg-color );
  }
}

.error_svg, .error_color {
  border: 2px dashed red;
  position: relative;
  font-size: 8px;
  &::after {
    content : "no svg";
    position: absolute;
    top: 0; left: 0;
    background-color: red;
    color: white;
    padding: 4px;
  }
}

.error_color {
  &::after {
    content : "no color";
  }
}

  .size_12 {
    width: 12px; height: 12px;
  }

  .size_16 {
    width: 16px; height: 16px;
  }

  .size_24 {
    width: 24px; height: 24px;
  }

  .size_32 {
    width: 32px; height: 32px;
  }

  .size_48 {
    width: 48px; height: 48px;
  }

  .size_64 {
    width: 64px; height: 64px;
  }