Product icons not showing in webviews (React)

[StephaneAdeso]

I'm creating a vscode extension using typescript and react. I tried to create my own button but the icon just doesn't appear.

This is my button:

import * as React from 'react';
interface SkrButtonProps {
  label: string;
  icon?: string;
  iconPosition?: 'before' | 'after';
  backgroundColor?: string;
  borderColor?: string;
  fontFamily?: string;
  onClick?: () => void;
}

const SkrButton: React.FC<SkrButtonProps> = ({
  label,
  icon,
  iconPosition = 'after',
  backgroundColor,
  borderColor,
  fontFamily,
  onClick
}) => {
  const buttonStyles: React.CSSProperties = {
    backgroundColor,
    borderColor,
    fontFamily
  };

  const buttonClassName = `skr-button ${iconPosition}`;

  return (
    <button className={buttonClassName} style={buttonStyles} onClick={onClick}>
      {icon && iconPosition === 'before' && (
        <div className={`codicon codicon-${icon}`} />
      )}
      {label}
      {icon && iconPosition === 'after' && (
        <div className={`codicon codicon-${icon}`} />
      )}
    </button>
  );
};

The styles:

.skr-button {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.skr-button:hover {
  background-color: #007acc;
  border-color: #005688;
  color: white;
}

.skr-button.before {
  flex-direction: row-reverse;
}

.skr-button i {
  margin-right: 8px; /* Ajusta el margen según sea necesario */
}

But no icon is showing:

I also tried this approach using the example you provided, but it didn't work either:

<div className="icon" style={{ width: 140, padding: 20, fontSize: 14 }}>
  <i className="codicon codicon-save" style={{ fontSize: 14 }}></i> save
</div>;

Is that a bug? What am i doing wrong? thanks.

PD: Not interested in installing external dependencies. I would like to use the provided icons by vscode.

[mjbvz]

Duplicate #692