Swiper slider SVG icon не отображается когда-то в угловом материале svg icon - PullRequest
Новая
       18

Swiper slider SVG icon не отображается когда-то в угловом материале svg icon

2 голосов
/ 07 марта 2019

Swiper иногда не отображает иконки SVG, когда я использую иконку SVG с угловым материалом.

Я использую значок SVG таким образом - Ссылка на значок SVG здесь

HTML-код 

<swiper [config]="expertExperienceConfig">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="certificationProcess"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="connectExperts"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CONNECT WITH EXPERTS</h2>
                                <span>Talk to other users. Reach out and introduce yourself.</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="linkRecruiters"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>DIRECT LINK TO RECRUITERS</h2>
                                <span>Share and be seen</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="blockchainVerification"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>BLOCKCHAIN VERIFICATION</h2>
                                <span>Trust, Validity, Convenience</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="planJourney"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="swiper-slide__icon">
                                <mat-icon svgIcon="improveEfficiency"></mat-icon>
                            </div>

                            <div  class="swiper-slide__content">
                                <h2>CERTIFICATION PROCESS</h2>
                                <span>All your qualifications in one place</span>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next" hidden id="swiper-button-next"></div>
                    <div class="swiper-button-prev" hidden id="swiper-button-prev"></div>
                </swiper>

ТИП КОДА СКРИПТА (Код подтверждения) 

expertExperienceConfig: SwiperOptions = {
  loop: true,
  direction: 'vertical',
  slidesPerView: 4,
  autoplay: 1000};

Для большей ясности я просто прикрепил изображение. Посмотрите, пожалуйста, когда-нибудь значки показывают или иногда не показывают.

Я использую Angular 6 и swiper "swiper": "^3.4.2", упакуйте это

enter image description here

...