Creando acordeones

Hola, cuando estaba importando los icon, el de “faGear” no importaba correcta mente en el ‘boards.component.ts’, como si no lo encontrara, pero usando “faCog” ya todo perfecto.

            <li>
              <a class="block py-1 px-3"
                ><fa-icon [icon]="faCog"></fa-icon> Settings</a
              >
            </li>

import {CdkAccordionModule} from '@angular/cdk/accordion';

Mi acordeon a la versión actual

<cdk-accordion>
      <cdk-accordion-item
        #accordionMenu="cdkAccordionItem">
          <!-- Contenido visible del accordion -->
          <h2 class="block font-bold pt-4 pb-2 px-2 text-xs text-blue-950">
            Tus espacios de trabajo
          </h2>
          <button type="button" (click)="accordionMenu.toggle()" class="w-full flex justify-between align-center px-2  hover:bg-gray-200 rounded-lg">
            <div
              class="flex items-center"
            >
              <img
                class="w-10 h-10 rounded-lg mx-2"
                src="https://api.lorem.space/image/face?w=400&h=400"
                alt=""
              />
              <div class="w-3/4 text-left text-sm block p-2 text-gray-700">
                Espacio de trabajo de Brenda Sutara
              </div>
            </div>
            <div class="flex justify-center items-center">
              <fa-icon [icon]="accordionMenu.expanded ? faAngleUp : faAngleDown"></fa-icon>
            </div>
          </button>
          <!-- FIN Contenido visible del accordion -->

          <!-- Parte desplegable -->
          <ul
            [style.display]="accordionMenu.expanded ? '' : 'none' "
            class="flex flex-col text-sm text-gray-700 mt-1">
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faTrello" class="mr-3.5"></fa-icon> Boards</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faHeart" class="mr-3"></fa-icon> Highlights</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faBorderAll" class="mr-3.5"></fa-icon> Views</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faUsers" class="mr-2"></fa-icon> Members</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faGear" class="mr-3"></fa-icon> Settings</a
              >
            </li>
          </ul>
          <!-- FIN Parte desplegable -->
      </cdk-accordion-item>
    </cdk-accordion>

Había implementado acordeones con angular material y materializecss, es la primera vez con CDK! 💯