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

Development

AI-generated summary

The discussion introduces new icon aliases for replacing lock icons in closed topics and restricted categories. awesomerobot explains that the change, merged via PR #33547, allows admins to customize icons separately for topic.closed, topic.opened, and category.restricted. These aliases can be used in themes via api.replaceIcon, as shown in the example. Additionally, the update affects CSS targeting, requiring changes from .d-icon-lock to more specific selectors like `[class*=

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"]

13 Likes
Category Icons
Hide Lock Badge Icon