diff --git a/core/modules/ckeditor/ckeditor.admin.inc b/core/modules/ckeditor/ckeditor.admin.inc
index 074fffa..6bb7ede 100644
--- a/core/modules/ckeditor/ckeditor.admin.inc
+++ b/core/modules/ckeditor/ckeditor.admin.inc
@@ -6,7 +6,6 @@
  */
 
 use Drupal\Core\Template\Attribute;
-use Drupal\Component\Utility\SafeMarkup;
 use Drupal\Core\Language\LanguageInterface;
 
 /**
@@ -60,54 +59,35 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
   }
   $disabled_buttons = array_diff_key($buttons, $multiple_buttons);
 
-  $rtl = $language_interface->getDirection() === LanguageInterface::DIRECTION_RTL ? '_rtl' : '';
-
-  $build_button_item = function($button, $rtl) {
-    // Value of the button item.
-    if (isset($button['image_alternative' . $rtl])) {
-      $value = SafeMarkup::set($button['image_alternative' . $rtl]);
-    }
-    elseif (isset($button['image_alternative'])) {
-      $value = SafeMarkup::set($button['image_alternative']);
-    }
-    elseif (isset($button['image'])) {
-      $value = array(
-        '#theme' => 'image',
-        '#uri' => $button['image' . $rtl],
-        '#title' => $button['label'],
-        '#prefix' => '<a href="#" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">',
-        '#suffix' => '</span></a>',
-      );
-    }
-    else {
-      $value = '?';
-    }
+  $language_direction = $language_interface->getDirection();
 
+  $build_button = function($button, $language_direction) {
     // Set additional attribute on the button if it can occur multiple times.
     if (!empty($button['multiple'])) {
       $button['attributes']['class'][] = 'ckeditor-multiple-button';
     }
 
     // Build the button attributes.
-    $attributes = array(
-      'data-drupal-ckeditor-button-name' => $button['name'],
-      'class' => array('ckeditor-button'),
-    );
-    if (!empty($button['attributes'])) {
-      $attributes = array_merge($attributes, $button['attributes']);
-    }
+    $button['attributes']['data-drupal-ckeditor-button-name'] = $button['name'];
+    $button['attributes']['class'][] = 'ckeditor-button';
+    $button['attributes'] = new Attribute($button['attributes']);
+
+    // Add language direction property.
+    $button['language_direction'] = $language_direction;
 
-    // Build the button item.
-    $button_item = array(
-      'value' => $value,
-      'attributes' => new Attribute($attributes),
-    );
-    // If this button has group information, add it to the attributes.
-    if (!empty($button['group'])) {
-      $button_item['group'] = $button['group'];
+    // Check for the image button to be present and convert file URI to URL.
+    if (!empty($button['image']) || !empty($button['image_rtl'])) {
+      // The language direction is RTL, check for image_rtl otherwise use the
+      // default image button path.
+      if ($language_direction === LanguageInterface::DIRECTION_RTL && !empty($button['image_rtl'])) {
+        $button['image_url'] = file_create_url($button['image_rtl']);
+      }
+      else if(!empty($button['image'])) {
+        $button['image_url'] = file_create_url($button['image']);
+      }
     }
 
-    return $button_item;
+    return $button;
   };
 
   // Assemble list of disabled buttons (which are always a single row).
@@ -122,18 +102,18 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
         return $button['group'] === $group_name;
       });
       foreach ($buttons as $button) {
-        $variables['active_buttons'][$row_number][$group_name]['buttons'][] = $build_button_item($button, $rtl);
+        $variables['active_buttons'][$row_number][$group_name]['buttons'][] = $build_button($button, $language_direction);
       }
     }
   }
   // Assemble list of disabled buttons (which are always a single row).
   $variables['disabled_buttons'] = array();
   foreach ($disabled_buttons as $button) {
-    $variables['disabled_buttons'][] = $build_button_item($button, $rtl);
+    $variables['disabled_buttons'][] = $build_button($button, $language_direction);
   }
   // Assemble list of multiple buttons that may be added multiple times.
   $variables['multiple_buttons'] = array();
   foreach ($multiple_buttons as $button) {
-    $variables['multiple_buttons'][] = $build_button_item($button, $rtl);
+    $variables['multiple_buttons'][] = $build_button($button, $language_direction);
   }
 }
diff --git a/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php b/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php
index 494e345..11d142a 100644
--- a/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php
+++ b/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php
@@ -45,10 +45,9 @@
    *   - image: An image for the button to be used in the toolbar.
    *   - image_rtl: If the image needs to have a right-to-left version, specify
    *     an alternative file that will be used in RTL editors.
-   *   - image_alternative: If this button does not render as an image, specify
-   *     an HTML string representing the contents of this button.
-   *   - image_alternative_rtl: Similar to image_alternative, but a
-   *     right-to-left version.
+   *   - internal_button: Identifier of internal button.
+   *   - image_internal_has_rtl: Flag indicating whether there's RTL version
+   *     available.
    *   - attributes: An array of HTML attributes which should be added to this
    *     button when rendering the button in the administrative section for
    *     assembling the toolbar.
diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php
index c405c7f..e2d6e73 100644
--- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php
+++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php
@@ -126,163 +126,164 @@ public function getConfig(Editor $editor) {
    * Implements \Drupal\ckeditor\Plugin\CKEditorPluginButtonsInterface::getButtons().
    */
   public function getButtons() {
-    $button = function($name, $direction = 'ltr') {
-      return '<a href="#" class="cke-icon-only cke_' . $direction . '" role="button" title="' . $name . '" aria-label="' . $name . '"><span class="cke_button_icon cke_button__' . str_replace(' ', '', $name) . '_icon">' . $name . '</span></a>';
-    };
 
     return array(
       // "basicstyles" plugin.
       'Bold' => array(
         'label' => t('Bold'),
-        'image_alternative' => $button('bold'),
+        'internal_button' => 'bold',
       ),
       'Italic' => array(
         'label' => t('Italic'),
-        'image_alternative' => $button('italic'),
+        'internal_button' => 'italic',
       ),
       'Underline' => array(
         'label' => t('Underline'),
-        'image_alternative' => $button('underline'),
+        'internal_button' => 'underline',
       ),
       'Strike' => array(
         'label' => t('Strike-through'),
-        'image_alternative' => $button('strike'),
+        'internal_button' => 'strike',
       ),
       'Superscript' => array(
         'label' => t('Superscript'),
-        'image_alternative' => $button('super script'),
+        'internal_button' => 'superscript',
       ),
       'Subscript' => array(
         'label' => t('Subscript'),
-        'image_alternative' => $button('sub script'),
+        'internal_button' => 'subscript',
       ),
       // "removeformat" plugin.
       'RemoveFormat' => array(
         'label' => t('Remove format'),
-        'image_alternative' => $button('remove format'),
+        'internal_button' => 'removeformat',
       ),
       // "justify" plugin.
       'JustifyLeft' => array(
         'label' => t('Align left'),
-        'image_alternative' => $button('justify left'),
+        'internal_button' => 'justifyleft',
       ),
       'JustifyCenter' => array(
         'label' => t('Align center'),
-        'image_alternative' => $button('justify center'),
+        'internal_button' => 'justifycenter',
       ),
       'JustifyRight' => array(
         'label' => t('Align right'),
-        'image_alternative' => $button('justify right'),
+        'internal_button' => 'justifyright',
       ),
       'JustifyBlock' => array(
         'label' => t('Justify'),
-        'image_alternative' => $button('justify block'),
+        'internal_button' => 'justifyblock',
       ),
       // "list" plugin.
       'BulletedList' => array(
         'label' => t('Bullet list'),
-        'image_alternative' => $button('bulleted list'),
-        'image_alternative_rtl' => $button('bulleted list', 'rtl'),
+        'internal_button' => 'bulletedlist',
+        'internal_button_has_rtl' => TRUE,
       ),
       'NumberedList' => array(
         'label' => t('Numbered list'),
-        'image_alternative' => $button('numbered list'),
-        'image_alternative_rtl' => $button('numbered list', 'rtl'),
+        'internal_button' => 'numberedlist',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "indent" plugin.
       'Outdent' => array(
         'label' => t('Outdent'),
-        'image_alternative' => $button('outdent'),
-        'image_alternative_rtl' => $button('outdent', 'rtl'),
+        'internal_button' => 'outdent',
+        'internal_button_has_rtl' => TRUE,
       ),
       'Indent' => array(
         'label' => t('Indent'),
-        'image_alternative' => $button('indent'),
-        'image_alternative_rtl' => $button('indent', 'rtl'),
+        'internal_button' => 'indent',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "undo" plugin.
       'Undo' => array(
         'label' => t('Undo'),
-        'image_alternative' => $button('undo'),
-        'image_alternative_rtl' => $button('undo', 'rtl'),
+        'internal_button' => 'undo',
+        'internal_button_has_rtl' => TRUE,
       ),
       'Redo' => array(
         'label' => t('Redo'),
-        'image_alternative' => $button('redo'),
-        'image_alternative_rtl' => $button('redo', 'rtl'),
+        'internal_button' => 'redo',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "blockquote" plugin.
       'Blockquote' => array(
         'label' => t('Blockquote'),
-        'image_alternative' => $button('blockquote'),
+        'internal_button' => 'blockquote',
       ),
       // "horizontalrule" plugin
       'HorizontalRule' => array(
         'label' => t('Horizontal rule'),
-        'image_alternative' => $button('horizontal rule'),
+        'internal_button' => 'horizontalrule',
       ),
       // "clipboard" plugin.
       'Cut' => array(
         'label' => t('Cut'),
-        'image_alternative' => $button('cut'),
-        'image_alternative_rtl' => $button('cut', 'rtl'),
+        'internal_button' => 'cut',
+        'internal_button_has_rtl' => TRUE,
       ),
       'Copy' => array(
         'label' => t('Copy'),
-        'image_alternative' => $button('copy'),
-        'image_alternative_rtl' => $button('copy', 'rtl'),
+        'internal_button' => 'copy',
+        'internal_button_has_rtl' => TRUE,
       ),
       'Paste' => array(
         'label' => t('Paste'),
-        'image_alternative' => $button('paste'),
-        'image_alternative_rtl' => $button('paste', 'rtl'),
+        'internal_button' => 'paste',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "pastetext" plugin.
       'PasteText' => array(
         'label' => t('Paste Text'),
-        'image_alternative' => $button('paste text'),
-        'image_alternative_rtl' => $button('paste text', 'rtl'),
+        'internal_button' => 'pastetext',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "pastefromword" plugin.
       'PasteFromWord' => array(
         'label' => t('Paste from Word'),
-        'image_alternative' => $button('paste from word'),
-        'image_alternative_rtl' => $button('paste from word', 'rtl'),
+        'internal_button' => 'pastefromword',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "specialchar" plugin.
       'SpecialChar' => array(
         'label' => t('Character map'),
-        'image_alternative' => $button('special char'),
+        'internal_button' => 'specialchar',
       ),
       'Format' => array(
         'label' => t('HTML block format'),
-        'image_alternative' => '<a href="#" role="button" aria-label="' . t('Format') . '"><span class="ckeditor-button-dropdown">' . t('Format') . '<span class="ckeditor-button-arrow"></span></span></a>',
+        'button_text' => t('Format'),
+        'internal_button' => 'format',
+        'is_dropdown' => TRUE,
       ),
       // "table" plugin.
       'Table' => array(
         'label' => t('Table'),
-        'image_alternative' => $button('table'),
+        'internal_button' => 'table',
       ),
       // "showblocks" plugin.
       'ShowBlocks' => array(
         'label' => t('Show blocks'),
-        'image_alternative' => $button('show blocks'),
-        'image_alternative_rtl' => $button('show blocks', 'rtl'),
+        'internal_button' => 'showblocks',
+        'internal_button_has_rtl' => TRUE,
       ),
       // "sourcearea" plugin.
       'Source' => array(
         'label' => t('Source code'),
-        'image_alternative' => $button('source'),
+        'internal_button' => 'source',
       ),
       // "maximize" plugin.
       'Maximize' => array(
         'label' => t('Maximize'),
-        'image_alternative' => $button('maximize'),
+        'internal_button' => 'maximize',
       ),
       // No plugin, separator "button" for toolbar builder UI use only.
       '-' => array(
         'label' => t('Separator'),
-        'image_alternative' => '<a href="#" role="button" aria-label="' . t('Button separator') . '" class="ckeditor-separator"></a>',
+        'internal_button' => 'separator',
+        'button_text' => t('Button separator'),
+        'is_separator' => TRUE,
         'attributes' => array(
           'class' => array('ckeditor-button-separator'),
           'data-drupal-ckeditor-type' => 'separator',
diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php
index d569930..f2f9721 100644
--- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php
+++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php
@@ -59,7 +59,9 @@ public function getButtons() {
     return array(
       'Styles' => array(
         'label' => t('Font style'),
-        'image_alternative' => '<a href="#" role="button" aria-label="' . t('Styles') . '"><span class="ckeditor-button-dropdown">' . t('Styles') . '<span class="ckeditor-button-arrow"></span></span></a>',
+        'button_text' => t('Styles'),
+        'internal_button' => 'styles',
+        'is_dropdown' => TRUE,
       ),
     );
   }
diff --git a/core/modules/ckeditor/src/Tests/CKEditorLanguageDirectionTest.php b/core/modules/ckeditor/src/Tests/CKEditorLanguageDirectionTest.php
new file mode 100644
index 0000000..99999d4
--- /dev/null
+++ b/core/modules/ckeditor/src/Tests/CKEditorLanguageDirectionTest.php
@@ -0,0 +1,76 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\ckeditor\Tests\CKEditorLanguageDirectionTest.
+ */
+
+namespace Drupal\ckeditor\Tests;
+
+use Drupal\Core\Language\LanguageInterface;
+use Drupal\editor\Entity\Editor;
+use Drupal\filter\Entity\FilterFormat;
+use Drupal\filter\FilterFormatInterface;
+use Drupal\simpletest\WebTestBase;
+
+/**
+ * Tests the button's display text or display image on CKEditor toolbar.
+ *
+ * @group ckeditor
+ */
+class CKEditorLanguageDirectionTest extends WebTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = array('filter', 'editor', 'ckeditor', 'locale');
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    // Create a text format and associate this with CKEditor.
+    FilterFormat::create(array(
+      'format' => 'full_html',
+      'name' => 'Full HTML',
+      'weight' => 1,
+      'filters' => array(),
+    ))->save();
+    Editor::create(array(
+      'format' => 'full_html',
+      'editor' => 'ckeditor',
+    ))->save();
+
+    // Create a new user with admin rights.
+    $this->admin_user = $this->drupalCreateUser(array(
+      'administer languages',
+      'access administration pages',
+      'administer site configuration',
+      'administer filters',
+    ));
+  }
+
+  /**
+   * Tests that CKEditor RTL classes are being added.
+   */
+  public function testLanguageDirectionChange() {
+    $this->drupalLogin($this->admin_user);
+
+    // Install the Arabic language (which is RTL) and configure as the default.
+    $edit = array();
+    $edit['predefined_langcode'] = 'ar';
+    $this->drupalPostForm('admin/config/regional/language/add', $edit, t('Add language'));
+
+    $edit = array('site_default_language' => 'ar');
+    $this->drupalPostForm('admin/config/regional/settings', $edit, t('Save configuration'));
+
+    // Once the default language is changed, go to the tested text format configuration page. 
+    $this->drupalGet('admin/config/content/formats/manage/full_html');
+    $this->assertPattern('|cke_rtl|', 'Correct language direction classes are being added.');
+  }
+
+}
diff --git a/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig b/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
index 18d3558..cdadccf 100644
--- a/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
+++ b/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
@@ -3,7 +3,21 @@
  * @file
  * Default theme implementation for the CKEditor settings toolbar.
  *
+ * This template uses Twig macro to create the CKEditor buttons.
+ * @see http://twig.sensiolabs.org/doc/tags/macro.html
+ *
  * Available variables:
+ * - button: A list containing the CKEditor buttons.
+ *   - internal_button: Indentifier of internal button.
+ *   - is_dropdown: Flag for showing a dropdown type button (Optional). If the
+ *     value is true then a dropdown button is generated.
+ *   - is_separator: Flag for showing a separator "button" (Optional). If the
+ *     value is true then a separator button is generated for the toolbar UI.
+ *   - label: A human-readable, translated button name.
+ *   - button_text: Same as label but this can be used as a custom button name.
+ *   - language_direction: The direction, left-to-right, or right-to-left.
+ *   - image_url: Image URL for the button. If the button is an image, then
+ *     this has to be used.
  * - multiple_buttons: A list of buttons that may be added multiple times.
  * - disabled_buttons: A list of disabled buttons.
  * - active_buttons: A list of active button rows.
@@ -13,6 +27,42 @@
  * @ingroup themeable
  */
 #}
+{% macro button(button) %}
+  {# Buttons with text as labels #}
+  {% if button.internal_button %}
+    {# Dropdown Buttons. #}
+    {% if button.is_dropdown %}
+      <a href="#" role="button" title="{{ button.button_text }}" aria-label="{{ button.button_text }}">
+        <span class="ckeditor-button-dropdown">{{ button.button_text }}<span class="ckeditor-button-arrow"></span></span>
+      </a>
+    {# Separator Buttons. #}
+    {% elseif button.is_separator %}
+      <a href="#" role="button" title="{{ button.button_text }}" aria-label="{{ button.button_text }}" class="ckeditor-separator"></a>
+    {# Normal Buttons. #}
+    {% else %}
+      <a href="#" role="button" title="{{ button.label }}" aria-label="{{ button.label }}" class="cke-icon-only cke_{{ button.language_direction }}">
+        <span class="cke_button_icon cke_button__{{ button.internal_button }}_icon">{{ button.label }}</span>
+      </a>
+    {% endif %}
+  {# Buttons with image as labels. #}
+  {% elseif button.image_url %}
+    <a href="#" role="button" title="{{ button.label }}" aria-label="{{ button.label }}">
+      <span class="cke_button_icon">
+        <img src="{{ button.image_url }}" title="{{ button.label }}" alt="{{ button.label }}">
+      </span>
+    </a>
+  {# Buttons with no text or image as labels. #}
+  {% else %}
+    ?
+  {% endif %}
+{% endmacro %}
+
+{#
+  Reference the defined macro to be used in the same template.
+  @see http://twig.sensiolabs.org/doc/templates.html#global-variables
+#}
+{% import _self as ckeditor %}
+
 {% spaceless %}
   <fieldset role="form" aria-labelledby="ckeditor-button-configuration ckeditor-button-description">
     <legend id="ckeditor-button-configuration">{{ 'Toolbar configuration'|t }}</legend>
@@ -28,7 +78,7 @@
           <label for="ckeditor-available-buttons">{{ 'Available buttons'|t }}</label>
           <ul id="ckeditor-available-buttons" class="ckeditor-buttons" role="form" data-drupal-ckeditor-button-sorting="source">
           {% for disabled_button in disabled_buttons %}
-             <li{{ disabled_button.attributes }}>{{ disabled_button.value }}</li>
+             <li{{ disabled_button.attributes }}>{{ ckeditor.button(disabled_button) }}</li>
           {% endfor %}
           </ul>
         </div>
@@ -37,7 +87,7 @@
           <label for="ckeditor-multiple-buttons">{{ 'Button divider'|t }}</label>
           <ul id="ckeditor-multiple-buttons" class="ckeditor-multiple-buttons" role="form" data-drupal-ckeditor-button-sorting="dividers">
           {% for multiple_button in multiple_buttons %}
-            <li{{ multiple_button.attributes }}>{{ multiple_button.value }}</li>
+            <li{{ multiple_button.attributes }}>{{ ckeditor.button(multiple_button) }}</li>
           {% endfor %}
           </ul>
         </div>
@@ -56,7 +106,7 @@
                 <h3 class="ckeditor-toolbar-group-name" id="ckeditor-toolbar-group-aria-label-for-{{ button_group.group_name_class }}">{{ group_name }}</h3>
                 <ul class="ckeditor-buttons ckeditor-toolbar-group-buttons" role="toolbar" data-drupal-ckeditor-button-sorting="target" aria-labelledby="ckeditor-toolbar-group-aria-label-for-{{ button_group.group_name_class }}">
                 {% for active_button in button_group.buttons %}
-                  <li{{ active_button.attributes }}>{{ active_button.value }}</li>
+                  <li{{ active_button.attributes }}>{{ ckeditor.button(active_button) }}</li>
                 {% endfor %}
                 </ul>
               </li>
@@ -68,6 +118,7 @@
             <ul class="ckeditor-buttons"></ul>
           </li>
         {% endfor %}
+        </ul>
       </div>
     </div>
   </fieldset>