How to change the VMware Clarity Design System brand icon size

Question

I'm playing around with the VMware Clarity Design System UI (https://vmware.github.io/clarity/) and am running their seed application. I'm trying to replace their brand icon with my own, but it's a different size. I'm noticing that the icon appears to be hard-coded to 36px x 36px. If I try setting a new size in CSS, it still renders as 36px x 36px. Is this hard-coded?

LogoSize

Answer 1

That was it. I was thinking I needed to add the size to the image, not to the .clr-icon class. This works:

.header .branding .clr-icon {
    height: 13px;
    width: 73.9px;
    &.clr-dell-logo {
        background-image: url(../images/DellLogoWht.png);
    }
}

Answer 2

Your answer is correct for when you want to set size with css (I up-voted yours to reflect that). You can also set an icon size with the size attribute on the clr-icon element:

<clr-icon shape="info" size="48"></clr-icon>

We do have an example using the size attribute here, Clarity Icons Documentation

It's about 1/2 way down the page or search for Setting the icon size. FYI - we are in the process of updating the docs for Clarity Icons.