New aliases for replacing lock icons on closed topics and restricted categories

Dev
1

Today we’ve merged this change: DEV: add additional icon aliases for lock by awesomerobot · Pull Request #33547 · discourse/discourse · GitHub

What does it do?

This adds some aliases for the :locked: lock icon you see before closed topics and categories with restricted permissions. This will allow admins to replace the lock icon for categories and topics separately without affecting other uses of the lock icon in the interface.

The new icon aliases are:

  • topic.closed
  • topic.opened
  • category.restricted

How do you use it?

To replace these icons in a theme, you can now do something like this:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("topic.closed", "xmark");
  api.replaceIcon("category.restricted", "shield-halved");
});

More information on global icon changes here: Change icons globally

Important note for themes

This change will impact how these lock icons are targeted with CSS for everyone, even if you aren’t replacing them. If you were previously writing CSS like:

.badge-category__wrapper .d-icon-lock {
  display: none;
}

You should update .d-icon-lock to [class*="d-icon-category.restricted"]

.badge-category__wrapper [class*="d-icon-category.restricted"] {
  display: none;
}

or for topics

.topic-status .d-icon-lock → .topic-status [class*="d-icon-topic.closed"]

10 Likes