1

This component markup:

<lightning:tab aura:id="tab" title="{# 'New or Existing ' + v.tab.label }"> <aura:set attribute="label"> <lightning:icon iconName="{# v.tab.iconName }" size="small" class="slds-m-right_x-small"/> {# 'New or Existing ' + v.tab.label } </aura:set> ... </lightning:tab>

outputs the icons with their background color stretched vertically:

Example of badly presented icons

The only example I found in the SLDS documentation uses icons that have no background color.

I've tried adding extra markup but have not found a way to get the backgrounds presenting as I would like them so that the icons are square and vertically centred like the text is.

Is there a solution?

Improve this question
0

2 Answers 2

Reset to default
3

The closest you can do is to make the width of the Icon container same as the height that is around 40px. Then make the Icon size medium, so it will look centrally aligned from both side. You can also change the Icon color and background color.

Style

.THIS .iconColor svg { width:40px !important; fill : #004487 !important; } .THIS .iconColor { width:40px !important; background-color:#8CD3F8 !important; }

enter image description here

Style

.THIS .iconColor svg { width:40px !important; fill : #004487 !important; } .THIS .iconColor { width:40px !important; background-color:white !important; }

enter image description here

Component Markup

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global"> <lightning:card> <lightning:tabset> <lightning:tab title="New or Existing"> <aura:set attribute="label"> <lightning:icon iconName="standard:contact" size="medium" class="slds-m-right_x-small iconColor" /> New or Existing </aura:set> </lightning:tab> <lightning:tab title="New or Existing"> <aura:set attribute="label"> <lightning:icon iconName="standard:account" size="medium" class="slds-m-right_x-small iconColor" /> New or Existing </aura:set> </lightning:tab> </lightning:tabset> </lightning:card> </aura:component>
Improve this answer
0

Sticking with the "small" icons this does an OK job (at least in Chrome):

.THIS .iconHack { width: 24px !important; height: 24px !important; position: relative !important; top: 7px !important; } .THIS .iconHack svg { vertical-align: baseline !important; }

though purely through experimentation rather than insight into what is going on. And likely to be fragile.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.