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

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](http://stackoverflow.com/help/how-to-ask) on how to ask better question which lead to better answers. — Raymond, Jan 23 '17 at 16:18
So the seed project provides the following code:
Clarity
..... I changed the 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); } } — codemonkey_42, Jan 23 '17 at 17:09
Also tried : .clr-icon { &.clr-dell-logo { background-image: url(../images/DellLogoWht.png); background-size: 400px 180px; } } — codemonkey_42, Jan 23 '17 at 17:27
@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. — takeradi, Jan 23 '17 at 18:16

score 5 · Answer 1 · answered Jan 23 '17 at 21:16

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

score 3 · Answer 2 · answered Aug 02 '17 at 14:26

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.

How to change the VMware Clarity Design System brand icon size

2 Answers2