Show Icon Based on a Label

The section_page.hbs file does something similar to what you're asking when creating links to Promoted or Internal articles.

See how this is done for promoted to understand what you can then do with video labels.

Go to this area in the section_page.hbs file:

{{#if section.articles}}
	<ul class="article-list">
		{{#each section.articles}}
			<li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
				{{#if promoted}}
					<span data-title="{{t 'promoted'}}" class="icon-star"></span>
				{{/if}}
				<a href="{{url}}" class="article-list-link">{{title}}</a>
				{{#if internal}}
					<span class="icon-lock" title="{{t 'internal'}}"></span>
				{{/if}}
			</li>
		{{/each}}
	</ul>
{{else}}
	<i class="section-empty">
		<a href="{{section.url}}">{{t 'empty'}}</a>
	</i>
{{/if}}

Notice that the logic is using template helpers and objects to process the articles (#each section.articles), conditionally (#if promoted) adding a class, text, and icon when writing the article links. For more information about template helpers and objects, see https://developer.zendesk.com/documentation/help_center/help-center-templates/introduction/

You could pattern after either the promoted or the internal example. Let's look at promoted.

              {{#if promoted}}
                <span data-title="{{t 'promoted'}}" class="icon-star"></span>
              {{/if}}

This logic checks to see whether the article is promoted. If so, then it adds a title using dynamic text and a class for the star icon, which is defined in the CSS:

.icon-star::before {
  content: "\2605";
}

To make this work for your scenario of adding an icon if the article has a "video" label:

• In the section_page.hbs file, inside {{#each section.articles}}, before the {{#if promoted}} line and at the same tab indentation, add the following:

              {{#if labels}}
              	{{#each labels}}
                  {{#is identifier 'video'}}
                    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
                  {{/is}}
              	{{/each}}
              {{/if}}

This logic reads the labels in the article being processed, checks for a "video" label, then adds the text and icon (same as used for Promoted). For your situation, you can use dynamic text or not, and set your own icon class, then, in the style.css file, map your icon.

For example, you could change the class from icon-star to icon-video

<span class="icon-video"></span>, then in the CSS add

.icon-video::before {
  content: "\2605";
}

Hi Bruce,

Thanks for the detailed explanation. I gave a label "video" to one of my articles, and then I added your code. However, I got the following in the section_page.hbs file:

Oren, if you can, show what you have now in the section.articles area of the code.

{{#if section.articles}}
...

<!-- Links to Existing FAQ Articles -->
<div class="container section-page">
<div class="container-inner">
{{#if section.articles}}
<ul class="article-list">
{{#is section.id 111111111}}
<li class="article-list-item"><a href="'">This is a customized link</a></li>
{{/is}}
{{#each section.articles}}
<li
class="article-list-item {{#if promoted}}article-list-item--is-promoted{{/if}}">
{{#if promoted}}
<span class="fas fa-star" title="{{t 'promoted'}}"></span>
{{/if}}
<a class="article-list-item__link" href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{else}}
<p><i><a href="{{section.url}}">{{t 'empty'}}</a></i></p>
{{/if}}

{{pagination}}
</div>
</div>

• Not sure if it matters, but when I copied your code, I found a hard return after <li.
• Make sure the icon can appear. 
  Is there a mapping for icon-star in the CSS? If not, you could map the icon inside the span tag within the #is identifier 'video' statement.

Here's your code segment with the labels statement (after #if promoted):

<!-- Links to Existing FAQ Articles -->
<div class="container section-page">
<div class="container-inner">
{{#if section.articles}}
<ul class="article-list">
{{#is section.id 111111111}}
<li class="article-list-item"><a href="'">This is a customized link</a></li>
{{/is}}
{{#each section.articles}}
<li class="article-list-item {{#if promoted}}article-list-item--is-promoted{{/if}}">
{{#if promoted}}
<span class="fas fa-star" title="{{t 'promoted'}}"></span>
{{/if}}
{{#if labels}}
{{#each labels}}
{{#is identifier 'video'}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/is}}
{{/each}}
{{/if}}
<a class="article-list-item__link" href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{else}}
<p><i><a href="{{section.url}}">{{t 'empty'}}</a></i></p>
{{/if}}

{{pagination}}
</div>
</div>

@Bruce Michelsen I appreciate all your help! I will give it a try...