Problem/Motivation

The iconography.css added to the Bootstrap UI Kit page is overriding the component styles as it's not restricted to the iconography section only.

Steps to reproduce

  1. Install the module
  2. Add a component that has .icon > svg HTML structure on it

Proposed resolution

Restrict the iconography.css to the Iconography section only

CommentFileSizeAuthor
#4 Screenshot from 2026-07-23 10-37-23.png525.23 KBhfernandes
Screenshot from 2026-07-23 10-12-36.png529.89 KBhfernandes

Issue fork bootstrap_ui_kit-3612786

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

hfernandes created an issue. See original summary.

hfernandes opened merge request !27

hfernandes’s picture

hfernandes commented
Status: Active » Needs review

MR opened.

hfernandes’s picture

hfernandes commented
StatusFileSize
new Screenshot from 2026-07-23 10-37-23.png525.23 KB

Results after applying the patch:
Result

nitinkumar_7’s picture

nitinkumar_7 commented

Tested MR !27 against the reported bug.

Before : confirmed via DevTools that .bootstrap-ui-kit .icon svg (and -sm/-md/-lg variants) from iconography.css matched .icon > svg anywhere on the page, leaking into unrelated components outside the Iconography section.

After patch : Rescanned the same Big Button component in DevTools. The iconography.css icon-size rules no longer appear in the cascade for this element - only expected global styles (_reboot.scss vertical-align, box-sizing, and the SVG's own fill: currentColor) are applied. Icons render correctly in both the Iconography section and the unrelated component

One follow-up worth a quick look before RTBC: this test case happened to use an SVG with its own viewBox sizing, so it looked fine even fully unstyled. Might be worth a second pass on a component whose icon relies on iconography.css dimensions (rather than intrinsic SVG sizing) to make sure nothing outside the Iconography section was depending on those rules for correct sizing.

other than it looks clean

aaronchristian made their first commit to this issue’s fork.

aaronchristian’s picture

aaronchristian commented

Awesome thanks everyone, i tested on my side and all looks good with that use case you mentioned @nitinkumar_7

aaronchristian’s picture

aaronchristian commented
Status: Needs review » Reviewed & tested by the community
aaronchristian’s picture

aaronchristian commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

aaronchristian’s picture

aaronchristian commented
Status: Fixed » Closed (fixed)