+ Start a Discussion
Matrix ReturnsMatrix Returns 

Can please let me know ? How this following lines work in lightning component ?

<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold" />
              </svg>
              <span class="slds-assistive-text">Bold</span>
            </button>

 
bhanu_prakashbhanu_prakash
Hi  Matrix Returns,
Mark as best answer, If it resloves !!​
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold" />
              </svg>
              <span class="slds-assistive-text">Bold</span>
            </button>
1. Button tags which help you display button in lightning component.
2. svg  tag is a icon which display which stores in  /assets/icons/utility-sprite/svg/symbols.svg#bold
3. Span tag which display Bold with CSS

CSS  

slds-button
slds-button_icon
slds-button_icon-border-filled
slds-assistive-text

above each CSS class contains different styling which will apply on button in lightning component.

Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com (https://www.forcelearn.com/)
Matrix ReturnsMatrix Returns
<svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold" />
              </svg>
When i am going to save this lines component is throwing error during save no svg found .
Also I am not able to understand this line xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold" where it is store ?? in my org ?? assest file?? 

please elaborate .
Thank you  
bhanu_prakashbhanu_prakash
Hi
Mark as best answer, If it resloves !!
Also, most probably lightning doesn't support <use/> tag
https://www.lightningdesignsystem.com/components/icons/
you need to modify your svg code like below
<SVG> tags is 
<aura:component>
    <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0">
        <!--      <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold" />
              </svg> -->
         <lightning:icon iconName="utility:symbols" size="large" alternativeText="symbols"/>
        <lightning:buttonIcon iconName="utility:symbols"  alternativeText="symbols" />
              <span class="slds-assistive-text">Bold</span>
            </button>
</aura:component>
or you can place you SVG code between <![CDATA[   code ]]>
<aura:component>
    <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0">
   <![CDATA[
        <svg class="slds-button__icon" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold" />
              </svg> 
      ]]>
              <span class="slds-assistive-text">Bold</span>
            </button>
</aura:component>

Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com (https://www.forcelearn.com/)

 
Matrix ReturnsMatrix Returns
User-added image


gets this image after using 
<![CDATA[ ]]>
bhanu_prakashbhanu_prakash
Hoo, So don't use CDATA, try to move your component into lightning icon or lightning:buttonIcon 
Matrix ReturnsMatrix Returns
Hi Thank you, I am able to get the icon but the text is not editable ... why ?
This is my lightning code.
<!--Rich Text Editor-->
                   <div  style="min-height: 180px;">
<div class="slds-form-element">
<div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">
<div role="toolbar" class="slds-rich-text-editor__toolbar slds-shrink-none">
<ul aria-label="Format text" class="slds-button-group-list">
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0">
<lightning:buttonIcon iconName="utility:bold"  alternativeText="symbols" />
<span class="slds-assistive-text">Bold</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
 <lightning:buttonIcon iconName="utility:italic"  alternativeText="symbols" />
<span class="slds-assistive-text">Italic</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:underline"  alternativeText="symbols" />
<span class="slds-assistive-text">Underline</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:strikethrough"  alternativeText="symbols" />
    
<span class="slds-assistive-text">Strike Through</span>
</button>
</li>
</ul>
<ul aria-label="Format body" class="slds-button-group-list">
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:richtextbulletedlist"  alternativeText="symbols" />
<span class="slds-assistive-text">Bulleted List</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:richtextnumberedlist"  alternativeText="symbols" />
<span class="slds-assistive-text">Numbered List</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:richtextindent"  alternativeText="symbols" />
<span class="slds-assistive-text">Indent</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:richtextoutdent"  alternativeText="symbols" />
<span class="slds-assistive-text">Outdent</span>
</button>
</li>
</ul>
<ul aria-label="Remove Formatting" class="slds-button-group-list">
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
<lightning:buttonIcon iconName="utility:remove_formatting"  alternativeText="symbols" />
<span class="slds-assistive-text">Remove Formatting</span>
</button>
</li>
</ul>
</div>
<div class="slds-rich-text-editor__textarea slds-grid">
<div aria-label="Compose text" contenteditable="true" class="slds-rich-text-area__content slds-text-color_weak slds-grow">Compose text...</div> 
</div>
</div>
</div>
</div>

 
bhanu_prakashbhanu_prakash
Hi 
line no 70, you need to add input line
<div aria-label="Compose text" contenteditable="true" class="slds-rich-text-area__content slds-text-color_weak slds-grow">Compose text...
    <input type="text" id="name" class="slds-input" />
</div>