Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Material icons inside the chart view #1520

Open
FMorschel opened this issue Apr 10, 2024 · 0 comments
Open

Material icons inside the chart view #1520

FMorschel opened this issue Apr 10, 2024 · 0 comments
Labels
question Further information is requested

Comments

@FMorschel
Copy link

Question:
I've not worked a lot with HTML/CSS/JS and I was trying to add an icon (specifically in this case a material one, but any other would be just fine as well).
I'd like to know if this should be possible and if so, what am I doing wrong?

Here is how I'm currently attempting this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="container">
  <button class="copyValue" onclick="copyToClipboard(JSON.stringify(response))">
    <i class="material-icons">content_copy</i>
  </button>
</div>
<style>
  body {
    font-size: 13px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .copyValue {
    background: none;
    border: none;
    color: #ffffff; /* Change the color to white */
    font-size: 24px;
    padding: 12px;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
  }

  .copyValue:hover {
    color: #dddddd; /* Change the hover color to a lighter shade of white */
  }

  .copyValue:active {
    color: #bbbbbb; /* Change the active color to a lighter shade of white */
  }

  .copyValue i.material-icons {
    vertical-align: middle;
  }
</style>
var html = `
#above content here (separated simply to help visualization)
`

tc.chartHTML(html);

Output:
Image with vscode dark theme background colour and "content_copy" text in white

Are you using the free version/paid version/trial:
I'm using the free version.

@FMorschel FMorschel added the question Further information is requested label Apr 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant