# Header-widget-override component help

**URL:** https://meta.discourse.org/t/header-widget-override-component-help/336846
**Category:** Development
**Created:** [November 19, 2024, 1:21am UTC](https://meta.discourse.org/t/header-widget-override-component-help/336846 "2024-11-19T01:21:15Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [November 19, 2024, 1:21am UTC](https://meta.discourse.org/t/header-widget-override-component-help/336846/1 "2024-11-19T01:21:15Z")

</div>

Hi Guys

I’ve been getting the time to update your component notice

> **[Admin Notice]** One of your themes or plugins needs updating for compatibility with upcoming Discourse core changes. (id:[_discourse.header-widget-overrides_](https://meta.discourse.org/t/296544)) Identified theme: ‘Header Icons’.

As a newbie who wrote the original component using the help documents, looking at examples and trial and error. I’m a bit lost.

The post about the changes, [Upcoming Header Changes - Preparing Themes and Plugins](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544) has assumed knowledge and context that I am lacking. And the help documents [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648?silent=true) do not reference the new APIs (and seem a little out of date now ☹ )

My component adds two icons to the header - one is a link to the Documents plugin’s page, and the other is an icon that changes icon based on a value in a custom field in the settings.

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/1/7/717aa18f1bc883ba84c83403744058bc1a0e0bca.png)

It is currently done via the below in head\_tag.html

Any guidance would be valued as i’m completely lost on where to go for this

Thanks

```plaintext
<script type="text/discourse-plugin" version="0.8">
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('div.d-header-icons.doc-header-set', [
            helper.h('a.icon.btn-flat.doc', {
                href:'/docs',
                title: 'Documents'
            }, [iconNode("book"), "Documents"]),
        ]);
    });

    
        api.decorateWidget('header-icons:before', (helper) => {
            //https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=times&s=regular,solid&m=free
            let icon = 'calendar';
            let title = 'Open status: unknown';
            try {
                const cache = JSON.parse(settings.tool_status);
                const shutter = cache.tools[4];
                if (shutter.status)
                {
                    icon = 'calendar-check';
                    title = 'Open since '+shutter.date;
                }
                else
                {
                    icon = 'calendar-alt';
                    title = 'Closed since '+shutter.date;
                }
            } catch (e) {}
            return helper.h('div.d-header-icons.shutter-status', [
                helper.h('a.icon', {
                    href:'/calendar',
                    title: title
                }, iconNode(icon)),
            ]);
        });
    </script>

```

You can see the whole github of my component here: [GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance · GitHub](https://github.com/bluefroguk1/DiscourseHeaderIcons) bask in my terrible coding attempt lol

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 3, 2024, 10:36pm UTC](https://meta.discourse.org/t/header-widget-override-component-help/336846/2 "2024-12-03T22:36:58Z")

</div>

Hey martin,

I made a PR to help you based on the code here. It may not be exactly what you want. It will help you to understand how to use the new API. 👍

[https://github.com/bluefroguk1/DiscourseHeaderIcons/pull/1](https://github.com/bluefroguk1/DiscourseHeaderIcons/pull/1)

Let me know if you have any questions.