# Custom admin/user icons in header

**URL:** https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337
**Category:** Support
**Created:** [February 4, 2019, 7:08pm UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337 "2019-02-04T19:08:07Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [February 4, 2019, 7:08pm UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337/1 "2019-02-04T19:08:07Z")

</div>

I’ve used a script created by one of the team members here that placed an extra icon in the header. Depending on user type, it showed a different icon.

However, since 2.2, this no longer works.

```
<script type="text/discourse-plugin" version="0.8.23">
let currentUser = api.getCurrentUser();
if (currentUser && currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#tickets-button', {
        href:'https://Example.com',
        title: 'Button 1',
        text: ''
    }, helper.h('')),
]);
});
}
</script>
<script type="text/discourse-plugin" version="0.4">
let currentUser = api.getCurrentUser();
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, helper.h('i.fa.fa-shopping-cart.home-button-icon')),
]);
});
}
</script>

```

Would appreciate any help.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 4, 2019, 7:26pm UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337/2 "2019-02-04T19:26:04Z")

</div>

You need to update the second script:

```plaintext
<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, iconNode('shopping-cart')),
]);
});
}
</script>

```

You will also need to add “shopping-cart” to the site setting called “SVG sprite subset” so that the SVG for that icon can be included in your site.

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [February 4, 2019, 8:31pm UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337/3 "2019-02-04T20:31:39Z")

</div>

Your script worked @pmusaraj, but it made the other icons vanish:

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/9/b9b384269c3c99386778b66647c3773c0c140164.png)

Also, admins still can’t see the button from the first script. I’ve been told by staff here that until 2.3 that won’t be possible 😕 (no staff class or something like that in 2.2)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 4, 2019, 8:37pm UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337/4 "2019-02-04T20:37:59Z")

</div>

That looks like a CSS issue. Easier to debug when looking at the site in a browser with the inspector open.

I didn’t look at the first script at all earlier, because I didn’t see an icon reference, but, in fact, you should merge the two scripts together to something like this:

```plaintext
<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'admin-icon';
if (currentUser && !currentUser.admin) {
  icon = 'shopping-cart';
}
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, iconNode(icon)),
]);
});
}
</script>

```

This will use `admin-icon` for admins and `shopping-cart` for non-admins. (Use an icon of your choice instead of the `admin-icon` placeholder I put in the code above.)

---

<div class="post-metadata">

### Author: ![WorldIsMine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/worldismine/32/455660_2.png) [@WorldIsMine](https://meta.discourse.org/u/WorldIsMine)
#### Post date: [February 6, 2019, 7:57am UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337/5 "2019-02-06T07:57:13Z")

</div>

Had small problems with that code @pmusaraj, also another dev team told me that this would be impossible to do with 2.2 as admin class isn’t used in 2.2? Not sure what that means. Anyway, our UI guy was able to do it (@shaundefense) via this code:

```
<script type="text/discourse-plugin" version="0.8.23">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'shopping-cart';
if (currentUser && !currentUser.admin) {
  icon = 'shopping-cart';
}
if (currentUser && currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#tickets-button', {
            href:'https://LinkOne.com',
            title: 'Link One',
            text: ''
        }, iconNode(icon)),
    ]);
});
}
</script>
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'shopping-cart';
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#tickets-button', {
            href:'https://LinkTwo.com',
            title: 'Link Two'
        }, iconNode(icon)),
    ]);
});
}
</script>  

```

Now the button shows up, and it’s two function (for admin it’s different and for users, it displays another link). Thanks everyone for help.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 6, 2019, 4:42pm UTC](https://meta.discourse.org/t/custom-admin-user-icons-in-header/108337/6 "2019-02-06T16:42:44Z")

</div>