How to align svg icon inside a button in HTML/CSS?-CodePudding

I am trying to put the svg icon inside the faq button. Can i use only flex box to align the icon inside the button?

This is my output:

And this what i want to achieve:

This is some of my css:

.section-custom{
margin: 50px;
display: flex;
flex-direction: column;
align-items: center;  /*cross axis for column  */
}

  
.div-faq{
padding-top: 40px;
padding-bottom: 40px;

}

 
.div-faq-list-item{
display: flex;
align-items: center;  /*cross axis for row   */
}

.faq-btn{
background-color: #333;
font-size: 25px;
border: 0;
width: 800px;
padding: 22px;
margin: 4px;
text-align: left;
}

And this is the HTML:

<section >
            <h1>Frequently Asked Questions</h1>

            <ul >
                <li >
                    <button >What is Netflix?
                     </button>
                     <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16"><rect width="100%" height="100%" fill="#333333"></rect> 
                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
                     </svg>
                </li>
                <li ><button >How much does Netflix cost?</button>
                    
                </li>
                <li ><button >Where can I watch?</button></li>
                <li><button >How do i cancel?</button></li>
                <li><button >What can I watch on Netflix?</button></li>
                <li><button >is Netflix good for kids?</button></li>

            </ul>

        </section>

CodePudding user response：

Remove the fill property from the SVG icon and also make the button and SVG background transparent. In-display flex you can achieve this result by justify-content:space-between;

ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  background-color:black;
  padding:1rem;
}
ul li{
  display:flex;
  padding:1rem;
  background-color:#2e2e2e;
  color:white;
  justify-content:space-between;
  align-items:center
  
}
li svg{
  fill:transparent;
}
button{
  font-size:1.6rem;
  background-color:transparent;
  color:white;
  border:none;
}

<ul >
    <li >
      <button >What is Netflix?</button>
       <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16"><rect width="100%" height="100%" ></rect> 
       <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
       </svg>
     </li>
     <li >
      <button>How much does Netflix cost?</button>
      <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16"><rect width="100%" height="100%" ></rect> 
      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
      </svg>
    </li>



 </ul>

CodePudding user response：

.main{
     margin: 50px;
}
 .button-box{
     display: flex;
     justify-content: space-between;
     background-color: #aaa;
     height: 50px;
     line-height: 50px;
}
 .title{
     padding: 0px 20px;
}
 .icon{
     align-self: center;
     background-color: #bbb;
     width: 40px;
     display: flex;
     justify-content: center;
}
 .icon img{
     width: 24px;
     height: 16px;
}

<div >
   <div >
      <div >Title</div>
      <div ><img src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.2.3/src/icon-ios7-plus.svg" /></div>
   </div>
</div>

CodePudding user response：

In order to add the svg icon to the button, you must include it inside the tags as shown:

<button >
    What is Netflix?
    <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
        <rect width="100%" height="100%" fill="#333333"></rect> 
        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
    </svg>
</button>

In the css styling, make use of flexbox to help position elements. In your case, flexbox should be applied to the button class to allow for the use of space-between and center item alignment. The css styling should look like this:

.faq-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  font-size: 25px;
  border: 0;
  width: 800px;
  padding: 22px;
  margin: 4px;
  text-align: left;
}