# Updated Custom Header Icon: Post Data via URL

**URL:** <https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174>\
**Category:** Development\
**Tags:** plugin-api\
**Created:** [September 5, 2024, 6:42pm UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174 "2024-09-05T18:42:31Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![littleviolette](https://avatars.discourse-cdn.com/v4/letter/l/d26b3c/32.png) [@littleviolette](https://meta.discourse.org/u/littleviolette)\
**Post date:** [February 12, 2025, 7:39pm UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/5 "2025-02-12T19:39:20Z")

</div>

Hi @Arkshine ,

Thank you so much for the detailed write-up. I tried injecting the code in `<head>` but is not seeing the icon show up. What did I do wrong?

```plaintext
<script type="text/discourse-plugin">
    import { apiInitializer } from "discourse/lib/api";
    import DButton from "discourse/components/d-button";
    
    export default apiInitializer("1.8.0", (api) => {
      const currentUser = api.getCurrentUser();
    
      if (!currentUser) {
        return;
      }
    
      const url =
        "https://example.com/?u=" + encodeURIComponent(currentUser.username);
      console.log("url: " + url)
      const iconComponent = <template>
        <li class="calculator">
          <DButton
            @href={{url}}
            @icon="calculator"
            class="icon btn-flat"
            title="Calculator"
            target="_blank"
          />
        </li>
      </template>;
    
      api.headerIcons.add("calculator", iconComponent, { before: "search" });
    });    
</script>

```

---

_[View the full topic](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174)._
