I am running into a strange situation.  I am working on an aura component that is embedded in aother component which is on our companies communities page.  The component I have iterates over a list and shows the title of the list item in an div that works like an accordion.  Directly to the right of the title I have a lighting icon that is using the chevron utility icon.  When I pull the page up the icons do not appear however once I click the div they show up, correctly.  The relevant code is below.  

    <aura:attribute type="Boolean" name="accordionOpen" default="false"/>
<div class="slds-grid slds-wrap slds-border_bottom slds-m-bottom_x-small slds-m-top_x-small">
      <div class="slds-col slds-size_1-of-1" onclick="{!c.toggleAccordion}">
        <div class="slds-text-title sub-text ">
        <aura:if isTrue="{!v.accordionOpen}" >
          <lightning:icon iconName="utility:chevrondown" class="chevron-icon-style slds-icon-utility-down slds-icon_container icon" size="xx-small" alternativeText="Collapse"  />
      </aura:if>
      <aura:if isTrue="{!!v.accordionOpen}" >
          <lightning:icon iconName="utility:chevronright" class="chevron-icon-style slds-icon-utility-right slds-icon_container icon" size="xx-small" alternativeText="Expand" />
      </aura:if>
          {!v.cardTitle}
      </div>
      </div>