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

Ocarina

I see this is your first Question on Stack Overflow, welcome! Please provide some code so we can see what you have tried and better understand the context of your question, which in turn will help us out to help you. Also see How To ask on how to ask better question which lead to better answers. – Spinelli

So the seed project provides the following code: <div class="branding"> <a href="#" class="nav-link"> <span class="clr-icon clr-dell-logo"></span> <span class="title">Clarity</span> </a> </div> ..... I changed the <span class="clr-icon clr-dell-logo"></span> and added my class clr-dell-logo to the CSS: .clr-icon { &.clr-clarity-logo { background-image: url(../images/clarity_logo.svg); } } .clr-icon { &.clr-dell-logo { background-image: url(../images/DellLogoWht.png); } } – Ocarina

Also tried : .clr-icon { &.clr-dell-logo { background-image: url(../images/DellLogoWht.png); background-size: 400px 180px; } } – Ocarina

@codemonkey_42: I believe your CSS rule is not being applied because of its specificity. You need to use .header .branding .clr-icon {height: xx, width: xx} and then change the height and width to override their set size. – Preston

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);
    }
}

Ocarina

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.

Multicolor