Align normal icon with stacked icon and the same size

Question

I have two icons where I want to align them with the same size. Expected results:

Current development:

If I try to set the stack icon small, it looks like this:

So, I want to have them aligned. This is a snippet of what I have now:

.icon {
  color: #a3a1a1;
}

.icon__plus-program {
  font-size: x-large;
}

.icon__trash {
  font-size: x-large;
}


.btn-unstyled {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-1">
  <button class="btn-unstyled" (click)="addAccordionItem()">
                    <span class="icon">
                      <i class="fa-solid fa fa-trash-alt icon__trash"></i>
                    </span>
                  </button>
  <button id="addAccordionItem" class="btn-unstyled" (click)="addAccordionItem()">
                  <span class="fa-stack icon icon__plus-program custom-icon">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-plus fa-stack-1x"></i>
</span>
                  </button>
</div>

Do you know how I can align them correctly?

Answer 1

You can use d-flex for this problem. Set icon size with font-size tag, after that use d-flex to align items correctly

.icon {
  color: #a3a1a1;
}

.icon__plus-program {
  font-size: x-large;
}

.icon__trash {
  font-size: x-large;
}

.btn-unstyled {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-1 d-flex justify-content-start">
  <button class="btn-unstyled" (click)="addAccordionItem()">
    <span class="icon">
      <i class="fa-solid fa fa-trash-alt icon__trash"></i>
    </span>
  </button>

  <button id="addAccordionItem" class="btn-unstyled" (click)="addAccordionItem()">
    <span class="fa-stack icon icon__plus-program custom-icon">
      <i class="fa-regular fa-circle fa-stack-2x"></i>
      <i class="fa-solid fa-plus fa-stack-1x"></i>
    </span>
  </button>
</div>